CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapdatatables
Fábio Silva
Fábio Silva

Reputation: 139

Drop Down Menu Hidden by div with overflow auto

I have this Drop Down Menu that is placed in a table row, that has some hidden content. Sample image

I can't touch ancestror html, because I dont control it. I have found this example https://css-tricks.com/popping-hidden-overflow/ but the div still stays within the overflowing div.

There is any solution, without needing to place this drop down content in the end of the HTML with fixed position?

I'm refearing to the dropdown menu with id 'thedropdownmenu' and the div with overflow with class name 'dataTables_scrollBody'. Please check on the 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>

Upvotes: 1

Views: 4738

Answers (1)

bruno.almeida
bruno.almeida

Reputation: 2896

I only see a way, using fixed positioning. It will not have the same efect, but see no other way if you don't want to change the html to other place. Example:

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

Hope it helps.

Upvotes: 1

Related Questions