Выпадающее меню не верхнее

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> 

Dropdown CSS:

В любом случае я могу обойти это?

Codepen пример: example

Спасибо!

Answer 1

Это было вызвано slimScroll аки fullScroll директивой, которая добавляет следующие встроенные стили (во время выполнения):

Следующая 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>