How can I make this dropdown always show beyond the parent div?

Question

I have a very specific HTML/CSS and/or JS question. I have created an example at this fiddle here to show the problem.

I have a scrollable div which is parent to a table:

<div style="overflow-y: auto; max-height: 300px;">
  <table style="width: 100%;">

...and one of my table rows contains a button with a drop-down menu:

<td>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

My problem is that when you click the button to open the drop-down menu, it is opened within the scrollable area, so if you don't scroll down you won't see the drop-down menu. But, I would like the button to open this dropdown outside of the scrollable area. Is there any way to do that, such that the drop down is visible, while letting the UI still be scalable (meaning, if I resize my window, it should still show the drop-down menu under the button)? Furthermore, I have a requirement to keep the scrollable area as it is, meaning, the scrollable area needs to be there for when there is too much content (this is a design requirement).

Answer 1

我不认为有办法让你的子容器ul.dropdown-menu “忽略” overflow: hidden其父...如果你需要保持HTML结构，我认为唯一的选择是删除position: relative .dropdown并在按钮点击时使用JavaScript设置.dropdown-menu的绝对顶部和左侧位置（使用按钮的位置）。

Answer 2

Why are you using the drop down inside the table? Why not use it outside the table? If you insist on using it inside the table, at least keep it on the first table-row or in the table header...

Updated your fiddle

<div style="overflow-y: auto; max-height: 300px;">
  <table style="width: 100%;">
    <thead>
      <tr>
        <th style="text-align: left">Column 1</th>
        <th style="text-align: left">Column 2</th>
        <th style="text-align: left">Column 3</th>
        <th>          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Dropdown
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">Action A</a></li>
              <li><a href="#">Action B</a></li>
              <li><a href="#">Action C</a></li>
            </ul>
          </div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
  </table>
</div>