下拉菜單不頂最

我有一些困難，有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

謝謝！

來源

2016-09-21 Richard Bailey

看起來像典型的溢出：隱藏的問題。 – CBroe

@CBroe感謝您的回覆。我嘗試將'overflow'更改爲可見，但沒有任何效果。除非我做錯了什麼 –

請展示完整的可測試示例。 [MCVE] – CBroe

它是由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 
       }); 

      }); 
     } 
    }; 
}

新增內嵌樣式：

[更新]

以下修復問題：

<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>

來源

2016-09-21 08:23:33

下拉菜單不頂最

回答

相關問題