Calendar Widget Problem

[buntyindia]

Hi ,

I am facing a problem with Calendar widget in IE a combo is overlapping calendar widget but in mozilla it is working fine...


IE

Mozilla:

Please Help...i tried z-index:100 in css but not got any success...

Bunty

[merseyside]

Good news, there's nothing wrong with what you've done and both browsers are working as expected. Bad news, IE is doing exactly what is says on the tin and isn't overlapping the select properly.

Two alternatives you could try. Firstly (using JavaScript), on displaying the calendar, take the select out of the document and replace with an ordinary text box (making sure the user can't do anything with it). On closing the calendar recreate the select and put back into the document. Secondly, instead of using a div for the calendar widget try an iframe.

[acoder]

This has been fixed in IE7 so you're probably using IE6. The second method mentioned by merseyside is called "iframe shimming" and should work in IE5.5+.

[buntyindia]

Good news, there's nothing wrong with what you've done and both browsers are working as expected. Bad news, IE is doing exactly what is says on the tin and isn't overlapping the select properly.

Two alternatives you could try. Firstly (using JavaScript), on displaying the calendar, take the select out of the document and replace with an ordinary text box (making sure the user can't do anything with it). On closing the calendar recreate the select and put back into the document. Secondly, instead of using a div for the calendar widget try an iframe.

What exactly the bug is?

[acoder]

What exactly the bug is?

It's a browser bug. Select elements always appear above anything no matter what the z-index setting is. This was fixed in IE7. Firefox and other browsers do not suffer from this.

[buntyindia]

Thanks ....for your help acoder...

Help is really very much appreciable :)

[acoder]

You're welcome. Try and search for "iframe shim" and you should find examples of code which will help to solve your problem.

[buntyindia]

You're welcome. Try and search for "iframe shim" and you should find examples of code which will help to solve your problem.

I think the second idea is more effective that we can Hide the combo when calendar appears & show again when calendar disappear ?

How we can do this?

[acoder]

I think the second idea is more effective that we can Hide the combo when calendar appears & show again when calendar disappear ?

How we can do this?

The first method is actually more effective - it appears as though there isn't a problem/bug at all. Surely that's more effective. In the second method, the user will notice something flashing away and coming back again.

I admit though that it is easier to program. In your calendar display function, hide the select element using:

document.getElementById('selObjId').style.visibility='hidden';

To show again, in your code/function that hides the calendar, just use the same line replacing 'hidden' with 'visible'.