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 than the model it will then cut off the rest of the list causing a user not to be able to select all of the options.

I have been googling this and saw this post Click Here which is very similar to my issue. However, they say to set overflow:visible; on the parent element, which does allow the dropdown to show. My problem is that when I set that, the table extends out of the modal.

Now, My question: Is there away that I can only show the overflow on the dropdown and not the table?

without posting a ton of code in here this is what html and css looks like: HTML:

<div class="my-grid">
  <table class="table table-responsive">
    <thead><tr><th>Choose One</th></tr></thead>
    <tbody>
      <tr>
        <td>
          <div class="dropdown">
              <button class="form-control btn btn-default btn-toggle" data-toggle="dropdown" id="dropDownControl" type="button">
                <div class="show-text">a</div>
                <span>Some Chosen Value here</span>
              </button>
              <ul aria-labelledby="dropDownControl" class="dropdown-menu">
                <li><a>a</a></li>
                <li><a>a</a></li>
                <li><a>a</a></li>
                <li><a>a</a></li>
              </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

css

.my-grid{
  overflow:auto;
  height:300px;
}

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.