[英]How can I make this dropdown always show beyond the parent div?
I have a very specific HTML/CSS and/or JS question. 我有一个非常具体的HTML / CSS和/或JS问题。 I have created an example at this fiddle here to show the problem.
我在这个小提琴上创造了一个例子来说明这个问题。
I have a scrollable div which is parent to a table: 我有一个可滚动的div,它是表的父级:
<div style="overflow-y: auto; max-height: 300px;">
<table style="width: 100%;">
...and one of my table rows contains a button with a drop-down menu: ...我的一个表行包含一个带有下拉菜单的按钮:
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
My problem is that when you click the button to open the drop-down menu, it is opened within the scrollable area, so if you don't scroll down you won't see the drop-down menu. 我的问题是当你单击按钮打开下拉菜单时,它会在可滚动区域内打开,所以如果你不向下滚动,你将看不到下拉菜单。 But, I would like the button to open this dropdown outside of the scrollable area.
但是,我希望按钮在可滚动区域外打开此下拉列表。 Is there any way to do that, such that the drop down is visible, while letting the UI still be scalable (meaning, if I resize my window, it should still show the drop-down menu under the button)?
有没有办法做到这一点,这样下拉是可见的,同时让UI仍然可扩展(意思是,如果我调整窗口大小,它仍应显示按钮下的下拉菜单)? Furthermore, I have a requirement to keep the scrollable area as it is, meaning, the scrollable area needs to be there for when there is too much content (this is a design requirement).
此外,我要求保持可滚动区域不变,这意味着,当内容太多时,可滚动区域需要存在(这是设计要求)。
我不认为有办法让你的子容器ul.dropdown-menu
“忽略” overflow: hidden
其父...如果你需要保持HTML结构,我认为唯一的选择是删除position: relative
.dropdown
并在按钮点击时使用JavaScript设置.dropdown-menu
的绝对顶部和左侧位置(使用按钮的位置)。
Why are you using the drop down inside the table? 你为什么要使用桌子内的下拉? Why not use it outside the table?
为什么不在桌子外面使用它? If you insist on using it inside the table, at least keep it on the first table-row or in the table header...
如果你坚持在表格中使用它,至少将它保存在第一个表格行或表格标题中......
<div style="overflow-y: auto; max-height: 300px;">
<table style="width: 100%;">
<thead>
<tr>
<th style="text-align: left">Column 1</th>
<th style="text-align: left">Column 2</th>
<th style="text-align: left">Column 3</th>
<th> <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action A</a></li>
<li><a href="#">Action B</a></li>
<li><a href="#">Action C</a></li>
</ul>
</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.