CODEWITHSUNDEEP
twitter-bootstrap
Tony
Tony

Reputation: 12695

Bootstrap Modal - auto height

I'm using bootstap's Model plugin. As you can see some dropdown items are under the bottom bar.

How to set the modal's height in that situation to make all the dropdown items to be visible and get rid of that scrollbar ?

enter image description here

Upvotes: 0

Views: 6432

Answers (2)

zessx
zessx

Reputation: 68790

Simply add those two rules (!important is only here because of SO snippets, you don't need it):

.modal { overflow: visible !important; }
.modal-body { overflow-y: visible !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <div class="dropdown">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
          <li><a href="#">Foo</a></li>
          <li><a href="#">Bar</a></li>
          <li><a href="#">Baz</a></li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Upvotes: 4

RahulOnRails
RahulOnRails

Reputation: 6542

You just add a class having z-index as attribute having higher than model box footer.

For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal may have z index higher than the 2000's.

so in your css i would add this:

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body class has a overflow-y: auto property. You might need to change this to:

.modal-body {
    overflow-y:visible;
}

Upvotes: 1

Related Questions