javascript - Angular-ui-bootstrap datepicker 指令 - 放在前面

Question

我在将 bootstrap 网格与 angular-ui 日期选择器结合使用时遇到了麻烦。在我的页面上有一列，其宽度小于日期选择器的宽度。下一个元素开始时，日期选择器被剪切。

这是问题的图片:

灰色区域是左列，包含带有下拉日期选择器的输入元素(此处也有描述:http://angular-ui.github.io/bootstrap/)。单击按钮时，日期选择器会按预期打开，但在右侧被 chop 了。

这是 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 结合使用，但它没有用。我还在 Google 和 SO 上进行了搜索，但那里讨论的问题似乎略有不同，建议的解决方案对我的情况不起作用。

编辑:我需要在侧边栏内垂直滚动，因为有很多元素。这是一个滚动事件的 jsfiddle，此功能不应中断。 http://jsfiddle.net/Jth4T/24/

我认为有问题的部分是将 overflow-x 与 overflow-y 组合在一起。

Answer 1

我猜这是这一行，在你的 css 中某处

overflow-x:hidden; 

这将导致任何比实际 div 宽的水平内容消失。请查看保存日期选择器的 div 是否具有此属性。

编辑，另一个解决方案是改变高度。您已经告诉我您不想弄乱图书馆，所以我创建了这个解决方法。 http://jsfiddle.net/Jth4T/23/

由于 Bootstrap 库现在限制了您的列的宽度，因此这将是可行的方法。希望这对您有所帮助，我无法为您找到任何其他解决方案。