Hidden div takes up height in Bootstrap modal body

Question

I have a div inside of a Bootstrap modal dialog, using the AngularJS directives for Bootstrap.

The visibility of the div is hidden by default. This will change later on in response to a user action (e.g., clicking a button or form field). The problem I'm having is, even though the div is hidden, its contents are still occupying space in the modal body.

In other words, the height of the modal body includes the contents of the hidden div, even though it's hidden. I don't want this to happen.

Here's a contrived example of the modal template, including the div that I have set to hidden in the CSS:

<script type="text/ng-template" id="modal.tmpl.html">
  <div class="modal-header">
    <h3>Modal</h3>
  </div>

  <div class="modal-body">
    <div>I'm a modal.</div>
    <div class="hidden-div">
      Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test
      <br/> Test <br/> Test <br/> Test <br/>
    </div>
  </div>

  <div class="modal-footer">
    Modal footer here
  </div>
</script>

It's probably easier to demonstrate what I mean with a fiddle. If you check out this fiddle, and click "Open Me", you should see what I mean.

The div with all of the "test" text is hidden, but the height of the modal body is still based off of it. How can I fix this?

Thank you for any help!

score 1 · Answer 1 · answered Mar 26 '18 at 08:10

1

Instead of using visibility use the display property. https://www.w3schools.com/cssref/pr_class_display.asp

.hidden-div {
  display: none;
}

answered Mar 26 '18 at 08:10

Del

164
1
7

score 1 · Accepted Answer · answered Mar 26 '18 at 08:20

1

The hidden-div makes use of visibility: hidden. Although it hides the contents, but doesn't makes up for the space.

Hidden div takes up height in Bootstrap modal body

2 Answers2