Bootstrap - dropdown creates scrollbar to parent DIV

Question

Bootstrap dropdown creates scrollbars to parent div when it is placed at the bottom. Does anyone know how to fix it?

jsFiddle for this.

It is easy to set overflow: hidden Or overflow: visible on bs-example class. But i need scrollbars, because i'll add contents to that div dynamically. At that time it needs scroll bars. Even though i have scrollbars dropdown is pushed down to the bottom. Can't dropdown float over the scrollbars OR Can i open upward when there is not enough space at the bottom?

Answer 1

You must use overflow: inherit; instead of auto.

http://jsfiddle.net/gildonei/xMddf/1131/

.bs-example
{
    margin: 30px;
    height: 100px;
    border: 1px solid #F00;
    overflow: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bs-example">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>