下拉菜单由div溢出自动隐藏

时间:2017-12-21 17:46:47

标签: javascript html css twitter-bootstrap datatables

我有一个放在表格行中的下拉菜单,它有一些隐藏的内容。 Sample image

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

有任何解决方案,无需将此下拉内容放在具有固定位置的HTML末尾?

我正在使用id' thedowndownmenu'进入下拉菜单。以及带有类名称的数据' dataTables_scrollBody'。 请检查jsfiddle。

Code Sample

<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>

1 个答案:

答案 0 :(得分:1)

我只看到一种方法,使用固定定位。它不会有相同的效果,但如果您不想将html更改为其他位置,请不要采用其他方式。例如:

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

希望它有所帮助。