Form.IO - 如何使 DataGrid 中的下拉选项变得可见
[英]Form.IO - How to make dropdown choices inside a DataGrid to become visible
问题描述
I'm using Form.IO JS library for developing a new form.
我正在使用Form.IO JS 库来开发新表单。 I need to create a DataGrid with 11 components inside of it, so the only way to fit everything inline is to use overflow: auto CSS rule (in fact overflow-x: auto; overflow-y: hidden ).我需要创建一个内部包含 11 个组件的 DataGrid，因此内嵌所有内容的唯一方法是使用overflow: auto CSS 规则（实际上是overflow-x: auto; overflow-y: hidden ）。
Here comes the issue.问题来了。 Because of those 2 CSS rules, when I open a select component, the opened list choices become visible inside the DataGrid component, which I don't want to because it hides all choices.由于这 2 条 CSS 规则，当我打开select组件时，打开的列表选项在 DataGrid 组件内变得可见，我不想这样做，因为它隐藏了所有选项。 I played around with z-index , but without luck.我玩过z-index ，但没有运气。
Can someone guide me on how to successfully show the dropdown choices outside of the DataGrid?有人可以指导我如何在 DataGrid之外成功显示下拉选项吗？ Thanks in advance!提前致谢！
1 个解决方案
解决方案1
2 已采纳 2022-05-05 12:36:08
This is an old and wierd CSS question that we read about from time to time.这是一个古老而奇怪的 CSS 问题，我们不时会读到。
Basically, you need to:基本上，您需要：
- create a wrapper box that is a common ancestor to both the box with
overflow-y: hiddenand yourselectlist.创建一个包装框，它是带有overflow-y: hidden的框和您的select列表的共同祖先。 This wrapper has to be positioned这个包装器必须被定位 - give a
position: absolutepositioning to the box that contains the list of your dropdown options (ie the list that has to bypass theoverflow-y: hiddendeclaration)给包含下拉选项列表的框position: absolute定位（即必须绕过overflow-y: hidden声明的列表） - ensure that the list HAS NOT any positioned ancestor before the wrapper.确保列表在包装器之前没有任何定位的祖先。
After all that, especially if you're using a third-party library that comes with its own css files, you will almost certainly need to tweak a bit with the library's default css rules.毕竟，特别是如果您使用的是带有自己的 css 文件的第三方库，您几乎肯定需要对库的默认 css 规则进行一些调整。
Here a snippet (using the Fomantic-UI library and components):这里有一个片段（使用Semantic-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>
Some other useful links about your question:关于您的问题的其他一些有用链接：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.