Bootstrap Dropdown隐藏在模态中 [英] Bootstrap Dropdown hiding in modal

问题描述

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

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.

我一直在使用Google搜索，并看到了此帖子点击此处，与我的问题非常相似。但是，他们说要在父元素上设置 overflow：visible; ，这确实允许显示下拉列表。我的问题是，当我设置它时，表扩展到了模态之外。

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?

而不在此处发布大量代码，这就是html和css的样子：
HTML：

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;
}

推荐答案

您遇到的问题与在： Bootstrap下拉列表被溢出裁剪：隐藏的容器，如何更改容器？。接受的答案将使下拉列表显示在容器外部，因此溢出不再重要。

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.

在这种情况下，请更改HTML以显式设置z-index（或在事件脚本中对其进行处理）：

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;">

如果使用的是AngularJS，则可以使用uib-bootstrap和uib-dropdown控件附加到自动（具有 dropdown-append-to-body属性），但您仍然必须显式处理z-index。

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.

这篇关于Bootstrap Dropdown隐藏在模态中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！