[英]Bootstrap Datepicker is displaying behind popover
I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues, first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display ,but now it's displaying behind my popover so it's not fully visible 我正在尝试在弹出窗口中显示日期选择器(使用bootstrap和bootstrap-datepicker扩展名),并且遇到一些问题,首先我在显示日期选择器时遇到了问题,并发现了以下主题: Popover中的Datepicker无法显示 ,但是现在显示在我的弹出窗口后面,因此无法完全看到
Here is the HTML code : 这是HTML代码:
<button type="submit" class="btn btn-primary pop_doleance" rel="popover" data-original-title="Ajouter doléance">Ajouter doléance</button>
<div style="display: none" class="pop_doleance_content">
<form class="well form-inline form_doleance">
<label for="date">Date : </label>
<input id="date" type="text" class="input-medium">
</form>
And the Javascript code : 和Javascript代码:
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function (){
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
$(function (){
$(".pop_doleance").popover({
placement:'bottom',
html : true,
content: function(){return $('.pop_doleance_content').html();},
callback: function(){$('#date').datepicker();}
});
});
Any ideas ? 有任何想法吗 ?
set popup's z-index to a lower value. 将弹出式窗口的z-index设置为较低的值。
.popup { z-index : 900; }
and set datepicker's container z-index to a higher value like in case of jquery ui datepicker set 并将datepicker的容器z-index设置为较高的值,例如在jQuery ui datepicker set中
.ui-datepicker-div { z-index: 999; }
In the css I added: 在CSS中,我添加了:
.datepicker {
z-index: 999 !important;
}
Note the "!important". 注意“!重要”。 It did not work without this.
没有这个就行不通。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.