HTML/CSS - Div Element Hidden When It Shouldn't Be

HTML / CSS - DIV Element hidden when it shouldn't be?

Do you have AdBlock installed? That might be hiding that div.

How do I prevent a hidden div from creating a linebreak?

By the way, I can prevent this by adding "display:inline" to the preceding tag (see example), but that is an extremely awkward workaround

This is how HTML works. <p> is a block-line element, that is, it takes up its entire row. Your hidden div isn't causing the line break, the preceding <p> element is.

div with hidden=false is still hidden

Instead of hidden use [style.display]="hideElement?'none':'inherit'"

Where in .ts you would set whether hideElement is true or false;

Alternatively create a class .display-hide{ display:none;} and then toggle it using

[class.display-hide]="hideElement"

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can’t be used until the login process has been completed. Browsers won’t render elements with the hidden attribute set.

I used this link for reference:

How to make the overflow CSS property work with hidden as value

Ok if anyone else is having this problem this may be your answer:

If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.

Javascript hide/show elements does not work properly

to hide/show the elements on load then this can be easily done by adding an if statement like so

@if (!empty($product))
<div class="row" id="show_presell_text">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>
@endif

This will completely omit the element you want at page load if empty and you can add it via JS code. However, If you want to just hide it using CSS classes you can do this:

<div class="row" id="show_presell_text" class="@if (empty($product)) hidden @endif">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>

If the product is empty the class will not be present and you can use CSS to set the element to display: none if the class is absent. Let me know if I can clarify further or if I got something wrong.

Edit: A better alternative for the second code block would be to add a hidden class as suggested below if the product is empty and then use it to hide it via CSS. You can then simply add or remove this class via JS as needed.

#show-presell-text.hidden {
display: none;
}

Div gets hidden behind another in responsive layout

Update your markup structure and change your id's to classes.

http://jsfiddle.net/partypete25/c14n6ym4/1/

<div class="wrapper">
  <div class="main">
    <div class="left">
      <p>1</p>
    </div>
    <div class="right">
      <p>2</p>
    </div>
    <div class="left">
      <p>3</p>
    </div>
    <div class="right">
      <p>4</p>
    </div>    
  </div>
</div>

Hide inline div using CSS

CSS:

.mydiv { display: inline; }
.hidden{ display: none; }

HTML:

<div class="mydiv hidden"></div>

JS:

$(function(){
  $('.myDiv').removeClass('hidden');
  // do your business here
});

---

Related Topics