Bootstrap-ui下拉菜單隱藏與周圍div溢出

我有一個導航欄標題與右對齊上的各種項目。我已將溢出設置隱藏在周圍的div（工具箱）上，以便在屏幕大小更改時將標題隱藏在左側品牌div下。Bootstrap-ui下拉菜單隱藏與周圍div溢出

在導航欄上，我放置了一個bootstrap-ui下拉菜單。當它被點擊並顯示時，它被工具箱div的溢出切斷。如果我刪除溢出它顯示罰款，但然後我有問題溢出將出現在減少屏幕尺寸。

如何讓下拉菜單顯示，同時保持隱藏的導航欄內容縮小？

<div id="ToolBox"> 
    Some really important text that shouldn't wrap with a reduced width screen 
    <span class="dropdown" dropdown on-toggle="toggled(open)"> 
    <a href class="dropdown-toggle" dropdown-toggle> 
     Period:{{currentPeriod.Description}} 
    </a> 
    <ul class="dropdown-menu"> 
     <li id="periodSelector" ng-model="currentPeriod" ng-repeat="period in periodList track by period.PeriodId"> 
      {{period.Description}} 
     </li> 
    </ul> 
</span> 

    <div id="SiteTitle" class="ng-binding">myApp</div> 
    </div>

來源

2015-07-03 sarin

你想真正做什麼？請更精確。你想隱藏縮小的屏幕尺寸下拉？ – Wazaaaap

如何防止下拉被周圍div隱藏/切斷，同時保持溢出（如果可能）？更好？ – sarin

我不明白你爲什麼會使用隱藏的溢出。無論如何，因爲您的工具箱和品牌絕對是定位的。使用z-index會在上面或下面放置一個。你想在小型設備上發生什麼？您可以使用媒體查詢來重新整理您的整個工具欄以查找較小的設備。 – jme11

添加下拉，追加到身體屬性應該解決這個問題。有關詳細信息，請參閱文檔here。

編輯

更新花掉here

<span class="dropdown" dropdown dropdown-append-to-body>

來源

2015-07-05 14:40:36

我試圖將它添加到上面的運動員，我不害怕。除非我做錯了！ – sarin

相信與否，我確實嘗試了dropdown-append-to-body屬性，它對我無效。我注意到你的Plunker使用ui-bootstrap的v0.13，而我只使用v0.12。當我升級它工作正常。然而，它也需要更高版本的Angular，所以我將花費一些時間檢查是否有突變。感謝您的幫助！ – sarin

Bootstrap-ui下拉菜單隱藏與周圍div溢出

回答

相關問題