Let's say I have a bootstrap panel on a page. Is there a way to have the contents of a dropdown fully visible within the panel. I'm having issues with the panel's overflow cutting off parts of my dropdowns. I don't want the panels to resize for their content, but rather to behave as you would expect from something like:

<div class="panel panel-default">
    <select>
        <option>...</option>
        ...
    </select>
</div>

Except with Bootstrap style drop-down content. Any suggestions?

Let's say I have a bootstrap panel on a page. Is there a way to have the contents of a dropdown fully visible within the panel. I'm having issues with the panel's overflow cutting off parts of my dropdowns. I don't want the panels to resize for their content, but rather to behave as you would expect from something like:

<div class="panel panel-default">
    <select>
        <option>...</option>
        ...
    </select>
</div>

Except with Bootstrap style drop-down content. Any suggestions?

• javascript
• css
• twitter-bootstrap
• drop-down-menu
• overflow

Share Follow edited Jun 2, 2014 at 16:59 Carol Skelly 363k9292 gold badges737737 silver badges647647 bronze badges asked Jun 2, 2014 at 16:52 AaronFAaronF 3,11133 gold badges2525 silver badges3333 bronze badges 1

• Are you sure it is not hidden by panel, it may be hidden parent of panel. – serefbilge Commented Nov 14, 2015 at 5:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

If your panel is inside a panel-group you could overwrite de default overflow property. In Bootstrap core exists this rule:

.panel-group .panel {
    overflow:hidden;
}

so you should overwrite it:

.panel-group .panel {
    overflow:visible;
}

The z-index of the Bootstrap dropdown should allow it to overlay the panel..

http://www.bootply./Owj9ZxXgYL

<div class="panel panel-default">
    <div class="panel-heading">Title</div>
    <div class="panel-body">
        <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          Menu
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Choice1</a></li>
          <li><a href="#">Choice2</a></li>
          <li><a href="#">Choice3</a></li>
          <li class="divider"></li>
          <li><a href="#">Choice..</a></li>
        </ul>
      </div>
    </div>
</div>

Are you using some other dropdown?

I solved the problem by creating my own class that duplicated the look of the panel without the overflow being hidden. No matter what I did to the z-index, it didn't change the fact that the content was still hidden.

To reiterate what AaronF said, changing the z-index of the dropdown will not fix this problem. It has to do with the overflow:hidden property set by bootstrap on panels. I don't quite understand how it creates this problem, but if you add .panel-group .panel { overflow: visible; } to your custom css, dropdowns will appear on top of panels as expected.

This could cause unknown side effects elsewhere in your app, so I would add a class selector before the .panel-group to keep it isolated to problem areas.