Question

我有jquery datepicker的常见问题，它显示在下拉框后面。我也尝试应用此处提供的解决方案：

Trouble with jQuery Dialog and Datepicker plugins

但它似乎无法在我的页面上运行。

我使用“jquery-ui.css”并在其中，我定义了：

.ui-datepicker { 
width: 17em; 
padding: .2em .2em 0; 
z-index: 9999 !important; 
}

但仍然是日期选择器显示在下拉框后面。当我在chrome developer的工具中检查我的页面时，我得到了以下内容：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-helper-clearfix
 ui-corner-all" style="position:absolute; top:160.875px; left 146px; z-index:1;">

我的问题是我怎么知道修改z-index的正确位置在哪里，我相信在.ui-datepicker中定义它是正确的但我不知道为什么它不起作用。

任何回复都将不胜感激。谢谢。

Answer 1

试试这个，

#ui-datepicker-div 
{
    z-index: 99999 !important; /* use #ui-datepicker-div in place of .ui-datepicker  */
}
.dropdown-box{
   z-index: 999 !important;      
}

Answer 2

为窗口小部件的顶部属性添加一些额外像素。在beforeshow和onclose of widget中调用该函数将类似于下面....

name: function(pxls){
            var widget = $(selector).datepicker("widget");

            widget.css("margin-top", function (i, v) {
                var top = parseFloat(v);
                return (top + pxls) + "px";
            });
        },

调用上面的函数如下。

beforeShow: $.proxy(this.name, this, 4)
onClose: $.proxy(this.name, this, -4)

这里4只是测试数据你已经弄明白你将会有多少。让我知道它是怎么回事......

日期选择器显示在下拉框后面

2 个答案: