CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Matthias Herrmann
Matthias Herrmann

Reputation: 2790

Bootstrap Hidden Element Requires Place

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?

Upvotes: 1

Views: 69

Answers (5)

Kapila Perera
Kapila Perera

Reputation: 857

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 .

Upvotes: 0

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

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>

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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;">

Upvotes: 2

Stefano Zanini
Stefano Zanini

Reputation: 5916

Use 

display: none

instead of

visibility: hidden

The difference is well explained on w3schools

Upvotes: 0

Super User
Super User

Reputation: 9642

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>

Upvotes: 1

Related Questions