Bootstrap Dropdown隐藏在模态中

Question

您好，我正在尝试获取引导下拉菜单以显示模型内的列表。我想我要说的是，当我单击下拉菜单时，它会展开，但如果列表比模型长，它将切断列表的其余部分，导致用户无法选择所有选项。

我一直在谷歌上搜索并看到这个帖子 Click Here 这与我的问题非常相似。但是，他们说在父元素上设置overflow:visible;，这确实允许显示下拉菜单。我的问题是，当我设置它时，表格超出了模式。

现在，我的问题是：我是否只能在下拉列表中显示溢出而不是表格？

无需在此处发布大量代码，这就是 html 和 css 的样子： 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

您遇到与以下相同的问题：Bootstrap dropdown clipped by overflow:hidden container, how to change the container?。接受的答案将使下拉菜单显示在容器外，因此溢出不再重要。

另一个障碍可能是现在下拉菜单根本不会显示，因为它位于模式对话框的后面。

在这种情况下，更改您的 html 以显式设置 z-index（或在事件脚本中处理它）：

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

如果您使用 AngularJS，您可以使用 uib-bootstrap 和 uib-dropdown 控件自动附加到正文（使用“dropdown-append-to-body”属性），但您仍然需要处理 z-index明确的。