Javascript Form.IO 如何使 DataGrid 中的下拉 Select 变得可见

发布于05月05日

我用Form.IO JS library来开发一个新表单.我需要创建一个包含11个组件的DataGrid，所以让所有内容都内联的唯一方法是使用overflow: auto CSS规则(实际上是overflow-x: auto; overflow-y: hidden)

有人能指导我如何成功地显示DataGrid的下拉选项outside吗？提前谢谢！

推荐答案

这是一个古老而复杂的CSS问题，我们经常会读到这个问题.

基本上，你需要:

在overflow-y: hidden框和select列表中创建一个common ancestor的wrapper box.这个包装必须是positioned
在包含下拉选项列表的框中放置position: absolute个位置(即必须包含overflow-y: hidden声明的列表)
确保列表HAS NOT位于包装器之前.

在所有这些之后，尤其是如果你使用的是一个第三方库，它附带了自己的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>