[英]angular-ui-bootstrap datepicker hide in jQuery UI dialog
[英]Angular-ui-bootstrap datepicker directive - bring to front
我在将自举网格与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结合起来。
我想你的css就是这条线
overflow-x:hidden;
这将导致任何比actial div宽的水平内容消失。 请查看持有您的日期选择器的div是否具有此属性。
编辑,另一个解决方案是改变高度。 你告诉我你不喜欢弄乱图书馆,所以我创建了这个解决方法。 http://jsfiddle.net/Jth4T/23/
由于Bootstrap库现在阻碍了列的宽度,因此这将是最佳选择。 希望这有帮助,我无法为您找到任何其他解决方案。
为此编写自定义css,覆盖那里的样式。 这不需要放在!important
之前;
你只需要编写你需要的确切样式。
我认为它现在已经解决了,只需检查一下即可。
在你的css代码下添加这些,但我建议为它创建一个自定义的css文件,这样引导依赖不会影响你的应用程序:
.dropdown-menu{
position: fixed;
margin-top: 95px;
z-index: 9999;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.