CODEWITHSUNDEEP
jquerycss
codeEnthusiast
codeEnthusiast

Reputation: 311

Whitespace take up space in CSS grid layout

I am using the .text() function to replace text in a div, situated in a CSS grid layout, if $(this).is(':contains("N/A")') returns true. My issue is that I'd like the div to continue to occupy space, as if it did contain text. However, it does not do so and my container does not occupy the full height of the space that it does if text is present. Is there any way to do this without specifying the height of each row div?

Upvotes: 0

Views: 68

Answers (2)

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10384

You can use visibility: hidden to hide an element while keeping the boundaries:

function hide() {
  document.getElementsByTagName('span')[0].className = 'hidden';
}
div {
  background: orange;
  border: solid 3px black;
}

.hidden {
  visibility: hidden;
}
<div>
  <span>Lorem ipsum</span>
</div>
<button onclick="hide()">Hide</button>

Upvotes: 2

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Try like this:

if($(this).is(':contains("N/A")'))
{
    var w = $(this).width();
    $(this).attr('style','min-width:'+w);
    $(this).text('');
}

Upvotes: 0

Related Questions