0

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

jQuery Dialog 和 Datepicker 插件的问题

但它似乎不适用于我的页面。

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

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

但日期选择器仍然显示在下拉框后面。当我在 chrome 开发者工具中检查我的页面时，我得到了以下信息：

<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 中定义它是正确的，但我只是不知道为什么它不起作用。

任何回应将不胜感激。谢谢你。

4

2 回答 2

0

尝试这个，

#ui-datepicker-div 
{
    z-index: 99999 !important; /* use #ui-datepicker-div in place of .ui-datepicker  */
}
.dropdown-box{
   z-index: 999 !important;      
}
于 2013-05-23T05:41:21.767 回答
0

为小部件的顶部属性添加一些额外的像素。在小部件的 beforeshow 和 onclose 中调用该函数..将如下所示..

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 只是测试数据，你已经知道这对你来说有多少。让我知道事情的后续..

于 2013-05-23T06:09:54.010 回答