ドロップダウンメニューオーバーフローオートでdivで非表示

私はこのドロップダウンメニューを表の行に配置しています。ドロップダウンメニューオーバーフローオートでdivで非表示

私がコントロールしていないため、ancestor htmlに触れることはできません。この例はhttps://css-tricks.com/popping-hidden-overflow/ですが、divはオーバーフローしているdiv内に残ります。

このドロップダウンコンテンツをHTMLの末尾に固定位置に配置する必要はありません。

id 'thedropdownmenu'というドロップダウンメニューと、 'dataTables_scrollBody'というクラス名でオーバーフローしたdivをリファインしています。 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>

出典

2017-12-21 Fábio Silva

[私はどのトピックについて質問できますか]（http://stackoverflow.com/help/on-topic）、[ask]、[mcve]の作成方法を確認してください。試したコードと受け取ったエラーを投稿してください。できるだけ具体的にすることで、より良い回答につながります。あなたは何を求めているのか分かりません。何が起こりたいですか、何が起こっていますか（あなたの言葉を使用して）？あなたはどんなエラーを受けていますか？ – happymacarts

ドロップダウンをどこに表示しますか？ – happymacarts

@happymacartsドロップダウンが正しい場所にあるので、画像を確認してください。問題は、祖先divの1つがオーバーフローをautoに設定しているため、そのdivの下にドロップダウンが表示されることです。 –

私は唯一の固定位置を使用して、方法を参照してください。同じefectはありませんが、htmlを別の場所に変更したくない場合は他の方法はありません。例：

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

希望します。

出典

2017-12-21 18:13:33

ドロップダウンのhtmlを変更することができます。とにかく私はあなたの解決策を試してみましょうが、それは左、上の値を設定するいくつかのjsを必要とするでしょうか？ –

「他の場所にhtmlを変更する」と言うと、それは祖先に移動することを意味します。 –

ドロップダウンメニューオーバーフローオートでdivで非表示

答えて

関連する問題