javascript – Angular-ui-bootstrap datepicker指令 – 带到前面

我在将自举网格与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结合使用：可见但是它不起作用.我也在谷歌和SO搜索,但在那里讨论的问题似乎略有不同,建议的解决方案在我的情况下不起作用.

编辑：
我需要在侧边栏内垂直滚动,因为有很多元素.这是一个滚动活动的jsfiddle,这个功能不应该破坏. http://jsfiddle.net/Jth4T/24/

我认为有问题的部分是将overflow-x与overflow-y结合起来.

解决方法:

我想你的css就是这条线

overflow-x:hidden; 

这将导致任何比actial div宽的水平内容消失.请查看持有您的日期选择器的div是否具有此属性.

编辑,另一个解决方案是改变高度.你告诉我你不喜欢弄乱图书馆,所以我创建了这个解决方法.
http://jsfiddle.net/Jth4T/23/

由于Bootstrap库现在阻碍了列的宽度,因此这将是最佳选择.希望这有帮助,我无法为您找到任何其他解决方案.

标签：javascript,css,angularjs,twitter-bootstrap,angular-ui
来源： https://codeday.me/bug/20190708/1404444.html