The Calendar popup Goes Over Select Elements in IE
Notice in the example page for the calendar popup that when using Microsoft Internet Explorer 5.5 and above, the calendar does not go under the drop down list but goes over the drop down list.
If you look at Lea Smart's calendar popup, which is what I used as a basis for the Calendar popup, the calendar goes under the drop down list when using IE.
All you have to do to make an element go over instead of under a select element in IE is add an iframe in the containing element, absolute positioned, the same size as your element with a z-index less than your element.
Check out the code in calpopup.js to see how it works.
Friday, March 31st, 2006 07:36:41 PM in Web Development
12 Comments
Add a comment
- Comment Preview
What day is it
Very nifty! The iframe is a solution i've heard of before for the select issue, but this security problem is not:
{ Link }
At least, i think that's what's giving me the problems. At ant rate, I took the iframe out, and my problems disappeared.
Overall, it's a great datepicker, certainly worth having handy...
Hi Chris,
It's actually pretty easy to fix the security problem where you get a message that says:
Just create a blank page on your site to load in the iframe. Then change the iframe element to point to the blank page.
Yeah, that's what I did... but a number of other scripts on the same page still didn't seem to like it very much, particularly the ones used for navigation out of the encrypted area. It's a short term solution.
Now, the reason why our nav links are JS-only is another issue entirely!
Thanks for the good calendar example. However when testing it I found 2 errors in it while testing it at your example site ({ Link }).
1st problem: If you go to the "A rolling 2 week period from today only" and press date selection picture and then select a date you get an error: "Invalid date string". Inspite this the correct date is then written to the textbox besides the dropdown icon.
2nd problem: If you go to the first "No date restrictions at all" and press date selection picture and then select a date you get an error: "months is not defined". Inspite this the correct date is then written to the textbox besides the dropdown icon.
I tested with both Firefox (1.5.0.2) and IE (6.0.290) and with both resulted those two errors.
Is it possible for you to add 2 new date formats, dd.mm.yyyy and d.m.yyyy? Those formats are used in many european countries and would make the calendar even more usable.
Best regards from Finland
-Tommi
Tommi,
Wow, good find. Please try it again. If you are using a Windows computer press <ctrl-F5> to make sure that the files are not coming from your cache. I also added the period as a delimiter.
Hello Tanny,
I tested the popups again and now they seem to be working fine. The new date format (d.m.yyyy) works also perfectly, thank you!
Best regards
Tommi
hi,
i am using ur calendarexample code but it is not working in "MAC" in Mac i am able to open calendar but i am not able to click on calendar so, can u send me the solution to this... its very urgent..........
link ::
{ Link }
when i am tring to open this link in MAC i am able to open calendar but i am not able to click date's anything plz send me ....
Advance Thanx,
Stalin
I have a work-around for this Safari bug. Apparently Safari doesn't like elements that have click events in them that have been created with createElement and insertBefore. These are the DOM methods I use to create the calendar container. The solution is to create the calendar container in your HTML. I know it's not a great solution, but it does work.
Just after the <body> tag add the following:
<div id="calcontainer"></div>
You can see a sample of this at dpsafaritest.htm
If anyone knows of a better solution, please tell me. In the mean time, I've reported this bug to Safari and I'm on the lookout for a permanent fix.
Whicked! You solution with cal popup going underneath select's in IE worked really well. Brilliant!!!
Thanks
Ian
I'm having a problem with the latest Javascript+CSS combination (downloaded today 02/11/2006).
In a HTTPS website if I go to a previous month and then either let the popup timeout or select a date the dark grey surrounding of the popup will remain.
This has been tested on both Internet Explorer 6.0.2800 and 6.0.2900.
Seems to work fine on a local machine though with or without HTTPS.
Javascript is slighlty modified by setting the IFRAME SRC to a blank.html file that only contains "<html><body></body></html>" to remove the IE security warning.
Daniel,
Thank you for your email, I'm glad you found the problem and it is working. I really do have to re-work the code for https so that users don't get the security warning. I need to add instructions to use blank.htm for the iframe src. I also have to provide instructions for the DOMContentLoaded event handler too.