ドロップダウンメニューが一番上にない

Question

data-toggle="dropdown"で何か問題があります。それは開きますが、下の画像によって示されるように、唯一の存在でdiv内のレンダリング：

HTMLのいくつか：

<div class="row pull-right"> 
    <div class="col-md-12"> 
     <div class="btn-group"> 
      <button data-toggle="dropdown" class="btn btn-xs btn-link dropdown-toggle" aria-expanded="false"> 
       <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i> 
      </button> 
      <ul class="dropdown-menu"> 
       <li><a href="" ng-click="vm.doSomeStuff(args)">Delete</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

ドロップダウンCSS：

これを回避する方法はありますか？

Codepen例：example

ありがとう！

Answer 1

それは、（実行時に）、以下のインラインスタイルを追加しますslimScrollfullScroll別名ディレクティブによって引き起こされた：、

次codepenを指令

<div full-scroll style="overflow: hidden; width: auto; height: 100%;"> 
    <div class="full-height-scroll"> 
     ... 
    </div> 
    <div class="slimScrollBar"></div> 
    <div class="slimScrollRail"></div> 
</div> 

...問題を示しています。

/** 
* fullScroll - Directive for slimScroll with 100% 
*/ 
function fullScroll($timeout){ 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      $timeout(function(){ 
       element.slimscroll({ 
        height: '100%', 
        railOpacity: 0.9 
       }); 

      }); 
     } 
    }; 
} 

追加インラインスタイル：

[UPDATE]

次の修正問題：

<div class="btn-group" uib-dropdown dropdown-append-to-body> 
    <button class="btn btn-xs btn-link" aria-expanded="false" uib-dropdown-toggle> 
     <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i> 
    </button> 
    <ul uib-dropdown-menu> 
     <li><a href="" ng-click="vm.doSomeStuff(ms)">Delete</a></li> 
    </ul> 
</div>