带有溢出的模态中的ui-select下拉菜单

Posted 2023-02-19

【中文标题】带有溢出的模态中的ui-select下拉菜单

【英文标题】：ui-select dropdown in modal with overflow

【发布时间】：2018-08-13 01:55:26

【问题描述】：

我目前正面临在 ui 引导模式中显示 ui-select 下拉菜单的问题，该模式应用了溢出 css。

目前，当打开 ui-select 下拉菜单时，选择列表会在模态中打开，并被应用于模态体的 overflow-y:scroll; 样式部分隐藏。

我想找到一个解决方案，使下拉菜单位于模态溢出之外并且可以与模态的边缘重叠，就像模态没有应用溢出时一样。

以下 plunker 演示了我面临的问题。模式中的溢出切换按钮将在应用溢出/未应用溢出之间切换，以演示问题和所需结果。

https://plnkr.co/edit/7eZ7GuPFMiEFMT2hogMV?p=preview

在这种情况下，模态体需要overflow-y: scroll。模态页眉和页脚必须在页面上可见，无需滚动。溢出被添加到模态体以仅将滚动应用于该区域，以允许将信息添加到该区域而不增加页面底部下方的模态高度。 modal-body中显示的数据可以由用户动态编辑，可以在modal中添加额外的数据行，每行可以包含ui-select元素。

【问题讨论】：

顺便说一句。没有overflow 模式的切换按钮。

感谢您指出这一点，我已经更新了 plunker 以包含缺少的切换按钮。

我现在正在努力解决同样的问题。你最终解决了吗？

感谢 plunkr，这正是我面临的问题 - 我看到很多关于为什么需要溢出的问题 - 但找不到答案。最近运气好吗？

【参考方案1】：

只需删除 overflow-y:scroll 即可。这允许下拉菜单与模态框重叠。

<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">Test Modal</h4>
  </div>
  <div class="modal-body" style="height: 150px">
    <ui-select ng-model="selected">
      <ui-select-match>$select.selected</ui-select-match>
      <ui-select-choices repeat="data in vm.selectData | filter: $select.search">
        data
      </ui-select-choices>
    </ui-select>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="vm.dismiss()">Close</button>
  </div>
</div>

> Demo fiddle

【讨论】：

由于模态设计，在这种情况下需要overflow-y:scroll，所以不幸的是删除样式不是一个合适的选择。但是，如果没有其他选择，则可能必须考虑这一点。

@Ashley 为什么需要它？

这是必需的，因为将在模态中显示的信息有时高度可能非常大。我需要模态页眉和页脚始终对页面上的用户可见，而无需滚动，但仍保留模态正文中存在的所有信息。溢出-y:scroll;除了这些 ui-select 问题之外，它非常适合这一点。

@Ashley 那么为什么不将“信息元素”的包装设置为overflow: scroll 而不是整个模式？

这些模式中的信息元素可以包含 ui-select 元素，并且可以由用户动态编辑。比如可以添加新的数据行，可以包含ui-select元素，需要可滚动。