Friday, February 5

Jquery UI datepicker widget appers behind the form, created using block UI PLugin.

I was working on a project, and had to use the jquery Block UI Plugin. I used this plugin to pop up a form for the user to submit. Also one of the fields in this form was of date, wherein the user had to choose his/her birthdate. For this field I thought of using the jQuery UI datepicker widget. After integrating the datepicker widget over the form , I had this issue which can clearly be seen in the image below. The datepicker  appeared at the bottom of the block UI and it was not clickable too. 

 
The main reason for this being that Block UI uses some z-index which is higher then that of the datepicker. So when we click over the birthday field in the form , the datepicker widget appears at the bottom.
The solution to this issue is that we change the z-index of the datepicker. Now the tricky part is where to make the changes. I went through all the CSS files used by the datepicker , but could not find where to make the required changes.

I then tried to make the changes at the ui.datepicker.css file , as shown below.

/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999;}
With the above changes to code, I could finally get the datepicker functioning over my form.

 
Well this was worth the note, and I hope it comes handy to someone like me.