JQuery Date Picker Z-Index
Tweet
Just a quick little geeky post in case it helps someone. I spent quite a few minutes if not an hour this morning trying to figure out why some J-Query calendars I was using were appearing under some of the other form elements. Apparently the default Z-Index of the calendar’s parent DIV boxes are set to -10.
I know the maximum z-index of the elements on my page so I was able to increase the Z-index in the CSS for the calendars, but one thing that vexed me was the !important keyword. Apparently if you don’t use it it is just ignored.
Here’s an example you could use to make the standard JQuery Date Picker calendars look more acceptable: -
#ui-datepicker-div
{
font-size: 62.5%;
width: 17em;
padding: .2em .2em 0;
z-index:20 !important;
}