パネル内のブートストラップドロップダウンメニュー

Question

パネル内にブートストラップドロップダウンメニューがあります。私の問題は、メニューがパネルの境界線に当たったときに何が起こるかをうまく処理していないことです。たとえば、下の境界線に当たった場合は、スクロールすることをお勧めします。さらに重要なのは、画面の右端から外れてしまう場合は、代わりに左に移動するか、パネルの境界を無視してパネル外に移動することです。

例として、以下のフィドルを参照してください。ドロップダウンボタンをクリックして、メニューを表示します。右側にあるメニューを表示するには、[フィルタタイプ]オプションにカーソルを合わせます。特に、最初のドロップダウンと2番目のドロップダウンのFilter Typeサブメニューに注意してください。

http://jsfiddle.net/w976zooe/

<div class="panel panel-default" style="width: 500px;"> 
    <div class="panel-body"> 
     <div style="min-height: 300px; overflow: auto;"> 

      <table style="display: inline-block;"> 
       <thead> 
        <tr> 
         <th> 
          <div class="input-group"> 
           <input class="form-control" /> 
           <div class="input-group-btn"> 
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> 
            <ul class="dropdown-menu dropdown-menu-right"> 
             <li class="dropdown-submenu"> 
              <a class="text-right">Filter type<span class="glyphicon glyphicon-menu-right"></span></a> 
              <ul class="dropdown-menu"> 
               <li><a>Contains</a></li> 
               <li><a>Equals</a></li> 
               <li><a>Less Than</a></li> 
               <li><a>Greater Than</a></li> 
              </ul> 
             </li> 
             <li><a>Row 1</a></li> 
             <li><a>Row 2</a></li> 
             <li><a>Row 3</a></li> 
             <li><a>Row 4</a></li> 
             <li><a>Row 5</a></li> 
             <li><a>Row 6</a></li> 
             <li><a>Row 7</a></li> 
             <li><a>Row 8</a></li> 
             <li><a>Row 9</a></li> 
             <li><a>Row 10</a></li> 
            </ul> 
           </div> 
          </div> 
         </th> 
         <th> 
          <div class="input-group"> 
           <input class="form-control" /> 
           <div class="input-group-btn"> 
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> 
            <ul class="dropdown-menu dropdown-menu-right"> 
             <li class="dropdown-submenu"> 
              <a class="text-right">Filter type<span class="glyphicon glyphicon-menu-right"></span></a> 
              <ul class="dropdown-menu"> 
               <li><a>Contains</a></li> 
               <li><a>Equals</a></li> 
               <li><a>Less Than</a></li> 
               <li><a>Greater Than</a></li> 
              </ul> 
             </li> 
             <li><a>Row 1</a></li> 
             <li><a>Row 2</a></li> 
             <li><a>Row 3</a></li> 
             <li><a>Row 4</a></li> 
             <li><a>Row 5</a></li> 
             <li><a>Row 6</a></li> 
             <li><a>Row 7</a></li> 
             <li><a>Row 8</a></li> 
             <li><a>Row 9</a></li> 
             <li><a>Row 10</a></li> 
            </ul> 
           </div> 
          </div> 
         </th> 
         <th> 
          <button type="button" class="btn btn-default">X</button> 
         </th> 
        </tr> 
       </thead> 
      </table> 

     </div> 
    </div> 
</div> 

Answer 1

<div class="panel panel-default"> 
    <div class="panel-heading">Title</div> 
    <div class="panel-body"> 
     <div class="btn-group"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
      Menu 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Choice1</a></li> 
      <li><a href="#">Choice2</a></li> 
      <li><a href="#">Choice3</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Choice..</a></li> 
     </ul> 
     </div> 
     <p> 
      slider, 
     mini-carousel, 
      switches, 
     accordion/collapse, 
      navbars, 
     isotope, 
     cards, 
     morris charts, 
     google charts, 
     fonts 
     </p><p> 
    </p></div> 
</div> 

例：http://www.bootply.com/Owj9ZxXgYL

Answer 2

Updated your fiddle

ちょうどあなたが左側に開き、追加id=main_sub CSS、以下を追加したいサブメニューをドロップダウンするclass="dropdown-submenu pull-left"を追加左に揃えるサブメニューに移動します。

#main_sub > .dropdown-menu{ 
position: absolute; 
left: 0; 

top: 0; 
margin-left: -150px; 
}