Angular-ui-bootstrap datepicker指令 - 帶到前面

Question

我在將自舉網格與angular-ui日期選擇器相結合時遇到了麻煩。 在我的頁面上有一列，其寬度小於日期選擇器的寬度。 當下一個元素開始時，會刪除datepicker。

這是問題的圖像：

灰色區域是左列，包含帶有下拉日期選擇器的輸入元素（此處也有描述： http ： //angular-ui.github.io/bootstrap/ ）。 單擊該按鈕時，日期選擇器會按預期打開，但會在右側剪切。

這是HTML：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Test</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="nav nav-sidebar-header">Header</div>
            <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="dt" is-open="opened"
                       close-text="Close"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i
                        class="glyphicon glyphicon-calendar"></i></button>
            </span>
            </p>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        </div>
    </div>
</div>

使用Javascript：

var modellingApp = angular.module('modellingApp', ['ui.bootstrap']);

modellingApp.controller('ModellingController', function ($scope) {

    $scope.today = function () {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.openCalendar = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
    }

});

CSS：

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

我還准備了一個jsfiddle： http ： //jsfiddle.net/Jth4T/15/

如果您使用jsfiddle，請注意HTML框的寬度至少應為768px，否則該列將不會顯示。

我很確定這可以用css修復，但直到現在我都無法工作。 我嘗試將position: absolute|relative|fixed與z-index和overflow:visible結合使用overflow:visible但是它不起作用。 我也在谷歌和SO搜索，但在那里討論的問題似乎略有不同，建議的解決方案在我的情況下不起作用。

編輯：我需要在側邊欄內垂直滾動，因為有很多元素。 這是一個滾動活動的jsfiddle，這個功能不應該破壞。 http://jsfiddle.net/Jth4T/24/

我認為有問題的部分是將overflow-x與overflow-y結合起來。

Answer 1

我想你的css就是這條線

overflow-x:hidden; 

這將導致任何比actial div寬的水平內容消失。 請查看持有您的日期選擇器的div是否具有此屬性。

編輯，另一個解決方案是改變高度。 你告訴我你不喜歡弄亂圖書館，所以我創建了這個解決方法。 http://jsfiddle.net/Jth4T/23/

由於Bootstrap庫現在阻礙了列的寬度，因此這將是最佳選擇。 希望這有幫助，我無法為您找到任何其他解決方案。

Answer 2

為此編寫自定義css，覆蓋那里的樣式。 這不需要放在!important之前; 你只需要編寫你需要的確切樣式。

Answer 3

我認為它現在已經解決了，只需檢查一下即可。

在你的css代碼下添加這些，但我建議為它創建一個自定義的css文件，這樣引導依賴不會影響你的應用程序：

.dropdown-menu{
    position: fixed;    
    margin-top: 95px;
    z-index: 9999;
}