Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery date picker z-index issue

I have a slideshow div, and I have a datepicker field above that div.

When I click in the datepicker field, the datepicker panel show behind slideshow div.

And I have put the script as:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

So I cannot change the z-index of datepicker in CSS. The z-index of datepicker which the script is generating is 1 and my slideshow div(also calling thru googleajaxapi) z-index is 5. So I guess I have to increase the z-index of date picker greater than 5. So is there any way to increase it ?

Someone can help me?

like image 941
rubyist Avatar asked Aug 11 '11 21:08

rubyist


4 Answers

Put the following style at the 'input' text element: position: relative; z-index: 100000;.

The datepicker div takes the z-index from the input, but this works only if the position is relative.

Using this way you don't have to modify any javascript from jQuery UI.

like image 129
Ronye Vernaes Avatar answered Nov 16 '22 23:11

Ronye Vernaes


simply in your css use '.ui-datepicker{ z-index: 9999 !important;}' Here 9999 can be replaced to whatever layer value you want your datepicker available. Neither any code is to be commented nor adding 'position:relative;' css on input elements. Because increasing the z-index of input elements will have effect on all input type buttons, which may not be needed for some cases.

like image 37
Aakash Sahai Avatar answered Nov 16 '22 23:11

Aakash Sahai


worked for me

.hasDatepicker {
    position: relative;
    z-index: 9999;
}
like image 17
Bashmakov Evgeniy Avatar answered Nov 17 '22 00:11

Bashmakov Evgeniy


Based in marksyzm answer, this worked for me:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
like image 15
Lucas Avatar answered Nov 16 '22 23:11

Lucas