带有溢出自动的div隐藏的下拉菜单答案

【问题标题】：Drop Down Menu Hidden by div with overflow auto带有溢出自动的div隐藏的下拉菜单
【发布时间】：2018-06-04 10:33:17
【问题描述】：

我有一个放置在表格行中的下拉菜单，其中包含一些隐藏的内容。

我无法触摸祖先 html，因为我无法控制它。我找到了这个例子https://css-tricks.com/popping-hidden-overflow/，但是 div 仍然停留在溢出的 div 中。

有什么解决办法，不需要把这个下拉内容放在HTML末尾固定位置？

我指的是 ID 为“thedropdownmenu”的下拉菜单和类名称为“dataTables_scrollBody”的溢出的 div。请检查 jsfiddle。

<div class="dataTables_scroll">
        <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
           <table id="myDataTable" class="display no-footer DTTT_selectable dataTable" aria-describedby="myDataTable_info" role="grid" style="width: 1960px;">
              <thead>
              </thead>
              <tbody>
                 <tr role="row" class="odd">
                    <td>
                       <div id="756d44c4-21f8-4cb7-bfb2-f3e8803630c1_Ajuntar" data-requiredfields="12" class="tableAction tableActionDropdown tableActionActive" onclick="checkIfChangeWithReasonActionIsActive(this, event)">
                          <div id="thedropdownmenu" class="dropdown open">
                             <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><span id="" class="tableActionOption icon-reject" title="Ajuntar"></span></a>
                             <ul class="dropdown-menu" role="menu">
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="687a2389-abfa-4915-8eec-86ea3b7f0509">Falta DNI</a></li>
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="a5d7cd22-34bd-4cc3-9534-d19d5c31f6f0">Faltan Escrituras</a></li>
                                <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="23065843-eac4-4a56-964e-c22dc9755fc7">Falta SEPA</a></li>
                             </ul>
                          </div>
                       </div>
                    </td>
                 </tr>
              </tbody>
           </table>
        </div>
     </div>

【问题讨论】：

您可能需要查看What topics can I ask about 和How to Ask，以及如何创建minimal reproducible example。发布您尝试过的代码和您收到的错误。尽可能具体，因为它会导致更好的答案。我们不知道你在问什么。你想发生什么，正在发生什么（用你的话）？您收到什么错误？
您希望下拉菜单出现在哪里？
@happymacarts 下拉菜单在正确的位置，检查图像。问题是祖先 div 之一已将溢出设置为 auto，这会导致下拉菜单显示在该 div 下。
我可能会考虑使用 dataTables render function 使该行在我想要的位置显示下拉菜单。也就是说，如果您可以访问 DataTable 初始化函数

标签： javascript html css twitter-bootstrap datatables

【解决方案1】：

我只看到了一种方法，使用固定定位。它不会有相同的效果，但是如果您不想将 html 更改为其他位置，则别无他法。示例：

.dropdown-menu{
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
}

希望对你有帮助。

【讨论】：

我可以更改下拉菜单的 html，如果有帮助的话。无论如何，我会尝试您的解决方案，但这需要一些 js 来设置左侧、顶部的值，对吧？
当我说“将 html 更改到其他位置”时，我的意思是将其移至祖先。