Bootstrap Dropdown hiding in modal

Question

Hello I am trying to get a bootstrap dropdown to show the list inside a model. I guess what I am saying is that when i click the dropdown it expands but if the list is longer th

Answer 1

You have the same problem as in: Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. The accepted answer will make the dropdown show outside the container, so the overflow will not matter any more.

Further hurdle may be that now the dropdown won't be shown at all since it is behind the modal dialog.

In that case, change your html to set the z-index explicitly (or handle it in the event script):

    <ul aria-labelledby="dropDownControl" class="dropdown-menu" style="z-index:1000;">

If you are using AngularJS, you can use uib-bootstrap and the uib-dropdown control to append to body automatically (with "dropdown-append-to-body" attribute), but you still have to handle the z-index explicitly.