隐藏在模态

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控件自动附加到body（使用“dropdown-append-to-body”属性），但你仍然需要处理z-index明确。