Form.IO - 如何使 DataGrid 中的下拉选项变得可见

Form.IO - How to make dropdown choices inside a DataGrid to become visible

我正在使用 Form.IO JS library 开发新表单。我需要创建一个内部包含 11 个组件的 DataGrid，因此内嵌所有内容的唯一方法是使用 overflow: auto CSS 规则（实际上是 overflow-x: auto; overflow-y: hidden）。

问题来了。由于这 2 个 CSS 规则，当我打开一个 select 组件时，打开的列表选项变得可见 在 DataGrid 组件中，我不想这样做因为它隐藏了所有的选择。我玩过 z-index，但没有运气。

有人可以指导我如何成功显示 DataGrid 外部 的下拉选项吗？提前致谢！

这是一个古老而奇怪的 CSS 问题，我们不时会读到它。

基本上，您需要：

  • 创建一个包装盒，它是 共同祖先 overflow-y: hidden 和你的 select ] 列表。这个包装器必须是 positioned
  • 将 position: absolute 定位到包含下拉选项列表的框（即必须 绕过 overflow-y: hidden 声明的列表）
  • 确保列表没有任何定位的祖先在包装器之前。

毕竟，特别是如果您使用的 third-party 库自带 css 文件，您几乎肯定需要对库的默认值 css规则。

这里是一个片段（使用 Fomantic-UI 库和组件）：

$('#selection').dropdown();

body {
  padding: 1rem;
}

.wrapper {
  position: relative;  /* "positioned" common ancestor to list and overflow hidden box */
}

.long--box {
  padding: 20px;
  width: 100%;
  height: 80px;
  background-color: lightcoral;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#selection.ui.selection.dropdown .menu {
  width: 196px;
  max-width: 196px;
  min-width: 196px;
  top: 58px;
  left: 21px;
  position: absolute; /* absolute positioning for the list */
  z-index: 10;
}

#selection.ui.selection.dropdown {
  width: 196px;
  transform: none;
  position: static !important; /* no positioning for the list parent (the first "positioned" one has to be the common ancestor)*/
}

input {
  height: 36px;
  width: 150px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  font-family: sans-serif;
  padding: 0 0 0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>



<body>
  <div class='wrapper'>
    <div class='long--box'>
      <div class='ui selection dropdown' id='selection'>
        <div class='default text'>Select...</div>

        <div class='menu'>
          <div class="item" data-value="0">Cat</div>
          <div class="item" data-value="1">Dog</div>
          <div class="item" data-value="2">Bird</div>
          <div class="item" data-value="3">Rabbit</div>
          <div class="item" data-value="4">Squirrel</div>
          <div class="item" data-value="5">Horse</div>
        </div>
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>
    </div>
  </div>
</body>

关于您的问题的其他一些有用链接：