Ajax autocomplete in front of modal window

[Jeppe Sommer]

Hello,

In a modal window I have a text field using an ajax autocomplete function. My problem is that the select option list is shown behind the modal window. I have tried to change the z-index parameters in the stylesheet file, but it seems that I can only move the select option list in front of the modal transparent background, not the modal window. I am wondering if it is possible to move the select option list in front of the modal window, ie. changing the z-index or other parameters or is there any other changes can I make?

Thanks in advance.

Modal window css code:

.modalDialog_transparentDivs{	
	filter:alpha(opacity=40);	/* Transparency */
	opacity:0.4;	/* Transparency */
	background-color:#AAA;
	z-index:1;
	position:absolute; /* Always needed	*/
}
.modalDialog_contentDiv{
	border:3px solid #ff8040;	
	padding:2px;
	z-index:100;/* Always needed	*/
	position:absolute;	/* Always needed	*/
	background-color:#FFF;	/* White background color for the message */
	
}
.modalDialog_contentDiv_shadow{
	z-index:90;/* Always needed	- to make it appear below the message */
	position:absolute;	/* Always needed	*/
	background-color:#555;
	filter:alpha(opacity=30);	/* Transparency */
	opacity:0.3;	/* Transparency */	
}

Ajax autocomplete css code:

	#formContent{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	
	}
	/* END CSS ONLY NEEDED IN DEMO */
	
	
	/* Big box with list of options */
	#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		width:400px;	/* Width of box */
		height:250px;	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border:1px solid #317082;	/* Dark green border */
		background-color:#FFF;	/* White background color */
		text-align:left;
		font-size:0.9em;
		z-index:9000;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;		
		padding:1px;
		cursor:pointer;
		font-size:0.9em;
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#317082;
		color:#FFF;
	}
	#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5000;
	}

[Eric Pascarello]

What is in the modal window? Flash, iframe, etc? What browser are you having issues with?

Eric

[Jeppe Sommer]

Eric Pascarello wrote:What is in the modal window? Flash, iframe, etc? What browser are you having issues with?

Eric

The modal window is a DHTML modal window. Please see:
http://www.dhtmlgoodies.com/index.html?whichScript=modal-message

I have tested on IE 7, Firefox 3.0 and Opera 9.3, all having the same problem.

So I guess it is not a browser issue but rather a code issue?

[Eric Pascarello]

Probably would be good to ask on their forums: http://www.dhtmlgoodies.com/forum/

Eric

[Jeppe Sommer]

Eric Pascarello wrote:Probably would be good to ask on their forums: http://www.dhtmlgoodies.com/forum/

Eric

Thanks, I already did, pending. I hoped someone here could help :-)

[Bear Bibeault]

Please read this.

[Jeppe Sommer]

Bear Bibeault wrote:Please read this.

"I posted this question on Sat Jan 10, 2009 6:12 pm at www.dhtmlgoodies.com Forum (http://www.dhtmlgoodies.com/forum/viewtopic.php?t=6865), but haven´t got an answer yet, so I hoped that someone here was able to help me"

Thanks in advance.

[Bear Bibeault]

That's fine. Just let us know when you've done that so no one wastes time repeating what may have already been posted elsewhere.

[Jeppe Sommer]

I found the solution.

There is a zIndex parameter in the modal javascript file that I can change. :-)