date picker shows behind drop down box

Question

i have the common problem for jquery datepicker that is showing behind dropdown box. i also tried to apply solutions provided here:

Trouble with jQuery Dialog and Datepicker plugins

but it seems not working on my page.

i use "jquery-ui.css" and inside it, i have defined:

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

but still the datepicker shows behind the drop down box. when i checked my page in chrome developer's tool, i got the following:

<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;">

my question is how can i know where is the correct place to modify the z-index, i believe defining it in .ui-datepicker is correct but i just dont know why it does not work.

any response will be appreciated. thank you.

hi, sorry, im really new to jquery/javascript/css and jsfiddle is also new to me, i'll try to research about it first and create it. i cannot provide the website because it is an internal company web app. — janell, May 23 '13 at 09:16

Rohan Kumar · Answer 1 · 2013-05-23T06:33:13.480

0

Try this,

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

edited May 23 '13 at 06:33

answered May 23 '13 at 05:41

Rohan Kumar

40,431
11
76
106

hi @Rohan, thank you for response. i also tried the code you provided but i got same results. – janell May 23 '13 at 05:57
z-index should better be set to important than to impotent ;) – Karl Adler May 23 '13 at 06:13
@janell try the above I have made changes – Rohan Kumar May 23 '13 at 06:35
@abimelex Writting mistake. :) – Rohan Kumar May 23 '13 at 06:35
this happens. Maybe you should also use the class .ui-datepicker instead of the ID? – Karl Adler May 23 '13 at 06:50

score 0 · Answer 2 · answered May 23 '13 at 06:09

Add some extra pixels for the top property of the widget. call that function in beforeshow and onclose of widget..will be something like below....

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

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

call the above function like below.

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

here 4 is just test data u have figure out how much that gonna be for u. let me know how it goes..

date picker shows behind drop down box

2 Answers2