Bootstrap Hidden Element Requires Place

Question

I'm using Bootstrap and I have included a navbar at the bottom of the page. But The notification bar element (look comment - it is the div element with the id warning .

The notification bar can change It's visibility. But when the visibility is 'collapsed' the div is still taking up all space.

My code:

 <div class="navbar navbar-default navbar-fixed-bottom">

    <!-- notification bar element can change visibility -->
    <div class="row"  id="warning" style="visibility: hidden;">
        <h2>Bottom Notification</h2>
        <small>Timestamp</small>
        <h3>This is a message.</h3>
    </div>
    <!-- -->

    <!-- element is static - can't change visibility -->
    <div class="container row">
        <p class="navbar-text pull-left">© 2016 - xxxx</p>
    </div>
</div>

How can I change it so that the div is not taking any space away when the visibility is hidden?

Answer 1

That is correct. The visibility could be seen as an opacity... so the element is there but with opacity zero, when hidden.

If you don't want it to use the place, rather use display :

<div class="row"  id="warning" style="display: none;">

Answer 2

Instead of visibility you can use hide class and toggle it

<div class="navbar navbar-default navbar-fixed-bottom">
    <!-- notification bar element can change visibility -->
    <div class="row hide"  id="warning">
        <h2>Bottom Notification</h2>
        <small>Timestamp</small>
        <h3>This is a message.</h3>
    </div>
    <!-- -->
   <!-- element is static - can't change visibility -->
    <div class="container row">
        <p class="navbar-text pull-left">© 2016 - xxxx</p>
    </div>
</div>

Answer 3

Change style="visibility: hidden;" to style="display: none; :

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="navbar navbar-default navbar-fixed-bottom"> <!-- notification bar element can change visibility --> <div class="row" id="warning" style="display: none;"> <h2>Bottom Notification</h2> <small>Timestamp</small> <h3>This is a message.</h3> </div> <!-- --> <!-- element is static - can't change visibility --> <div class="container row"> <p class="navbar-text pull-left">© 2016 - xxxx </p> </div> </div> 

Answer 4

Use

display: none

instead of

visibility: hidden

The difference is well explained on w3schools

Answer 5

that's the whole idea of visibility: hidden;, it keeps the space even it hides the element. But in display:none will leave the space .