Show Div Even If Empty

How to make an empty div take space?

It works if you remove floating. http://jsbin.com/izoca/2/edit

With floats it only works if there's some content e.g.

Show div even if empty

You could add a non-breaking space (Unicode symbol U+00A0) as the content of a pseudoelement only for :empty divs

div:empty::before {
   content: "\A0";
}

div { border: 1px #ccc solid; }

<div></div>

Hide div, if the div is empty

No JS needed - just change display property's value in this CSS declaration block:

.HEADER:empty { 
    grid-area: HEADER; 
    display: none;
}

Look at this fiddle:
https://jsfiddle.net/j8avxm1k/

If you type or put anything in the div.HEADER it will be visible again

EDIT

Personally I prefer good old fashioned "float" property instead of using this "reinventing the wheel" kind of methods, nevertheless in order to answer your question in the comment:

Reset the grid-template-rows property and set the .HEADER height in it's declaration to desired size, like so:

.MAIN-grid-container {
/* ... */
grid-template-rows: auto 640px 300px 100px;
/* ... */
}

.HEADER { 
/* ... */
height: 100px;
/* ... */
}

How to make a div take up space even if it is empty?

add:

.figure {
    vertical-align: top
}

Empty div (with style: height) will not display

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

How do I display an empty div tag with CSS?

It does work! :) You just have to add a height to it as well! :)

You can view the updated fiddle here: http://jsfiddle.net/cf0gprLn/1/

EDIT

I see that you added height to your HTML. The reason that is not working is because that is styling the whole div. The class on the other hand is kind of separate, and the height and width both need to be defined there. Its either all there, or in the HTML it self.

Angular ng-show Still Shows div Element When Empty

You are checking value of ID property which is not the ID within info object so use info.ID within the ng-show.

<div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->

If you don't want to render the element itself then use ng-if directive since ng-show directive simply hide using some CSS.

<div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->

Hide DIVs when a value is null or empty

This code will hide the empty fields (including their labels) when the content is empty. This code will hide the email Heading with an empty value.

let empty = document.querySelectorAll('.row > div');
empty.forEach(function(element) {
  if (element.textContent === '') {    element.previousElementSibling.style.display = 'none';    element.style.display = 'none';  }});

<div class="row">  <div class="col"><strong>Address</strong></div>  <div class="col-3">Beverly Hills 90210</div>  <div class="col"><strong>Phone</strong>:</div>  <div class="col-7">+1 1 11111111</div>  <div class="col"><strong>Email</strong>:</div>  <div class="col-8"></div></div>

How to display a message inside an empty div when a component doesn't render in it?

If I understand your question, you want to conditionally render a "No Data" fallback only after you've fetched data and there is nothing to render.

Add a loading state and conditionally render a loading indicator.
Filter the games and in the render check that there is an array length (i.e. something to map), and conditionally render the array or the fallback text if there is a current search term.

Code

const [searchLoaded, setSearchLoaded] = React.useState(false);

// in search handler
// toggle searchLoaded false when initiating a search
// toggle searchLoaded true when search completes

const results = games.filter(
  game => game.background_image !== null && game.ratings_count > 38
);

<div className="search-res">
  {results.length
    ? results.map(game => (
      <SearchRes
        key={game.name} 
        title={game.name} 
        rating={game.metacritic === null ? <MdGamepad/> : game.metacritic} 
        genre={game.genres.map(({ name }) => name).join(" ")} 
        imglnk={game.background_image === null ? "" : game.background_image}
        gameid={game.id}
        slug={game.slug}
        plat={game.parent_platforms}
      />
    ))
    : searchLoaded && "No Data"
  }
</div>