Question

I have a issue with a Jquery DatePicker popup dialog being clipped by an iFrame as shown in this image. Each tab is an iFrame and the DatePicker dialog gets clipped. Ive set the DatePicker z-index to 9999999 without effect. So I thought I’d add CSS padding to the ui-datepicker-div element like this;

$("#actiondate").datepicker(
    {changeYear:true , changeMonth:true, dateFormat:"dd-M-yy", yearRange:"-3:+3", showAnim: "slideDown",
    //beforeShow:function() { $('#ui-datepicker-div').wrap('<div style="padding-top:40px;" />'); }
    beforeShow:function() { $("#ui-datepicker-div").css("padding-top","40px;"); }
}); 

Didnt have any effect. Is there a way to reposition the DatePicker Dialog down a bit?

Clipper DatePicker Example http://www.forsythesit.com.au/res/img/clippeddialog.jpg

Answer 1

I was having a similar problem (and I just solve it): a datepicker overlaping with a fullcalendar. For me the solution was to change the z-index of the two elements in the css. But try with smaller values, (999999 was not working at all for me). z-index: 1 for the tabs and z-index:2 for the picker should do the job.

To position the datepicker use the margin attrib but, but do it directly on the css. Somehow using the “beforeShow” function was not working for me neither…

I now it is not the cleanest way to achieve it, but once you got it working you can focus on make it cleaner.

Cheers.