5 replies [Last post]
neosamz
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2005-03-25
Posts: 8
Points: 0

I have added z-index=0 (a css style) for my html select tag (combo box). I have a menu with z-index=100 and this simply means that the menu is always on top of the combo box. The problem is the menu is on top of all the other components except the combo box even I have forced it to z-index=0. Anyone encountered this before? Any solution? Please advice. Thank you.

Anonymous
Anonymous's picture
Guru

Re: z-index for combo box (html select tag)

Without seeing your code I can only guess.

z-index only works on elements that have been positioned.

Does that help?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

z-index for combo box (html select tag)

The select element is an OS widget with IE and some other browsers. It is not a part of these browsers and always rides over it. The best fix is to avoid the conflict or switch to Firefox or Opera.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

neosamz
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2005-03-25
Posts: 8
Points: 0

Re: z-index for combo box (html select tag)

yeap i had set the select element style with position as well together with z-index. I knew about this requirement. Well I could not restrict my user to only Firefox and Opera because most of my users are using IE and netscape as well. Any solution?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

z-index for combo box (html select tag)

Quote:
Any solution?
Short answer? No. Some folks have gone to the trouble of using javascript to set the form to {display: none;} while the menu is active. Personally, I think that's not worth the effort. I simply place the objects so they don't try to occupy the same space.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lorenzom
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2005-04-18
Posts: 1
Points: 0

drop down menus over select tags

Hi guys,
I've been working on the stuff and I think I find an interesting solution.
I havn't read throught all the replies, but it seems the matter is still open, so I decided to share this with you.
The basic idea is to hide the select with display="none" but, and that's the good news, "freeze" the select area with a "filter" - which is a specific of the IE (from 5.5 i believe): for other browser the problem doesn't exist - so we don't loose the view of the select underneath.
This is the (very simple!) code

<script>
function showMenu(value){
if(document.all)
if(document.all.selectMenuOuter)
if(document.all.selectMenuOuter.filters){
if(value){
document.all.selectMenuOuter.filters["revealTrans"].apply();
document.all.selectMenuInner.style.display = "none";
document.all.dropDownMenu.style.display = "block";
}else{
document.all.dropDownMenu.style.display = "none";
document.all.selectMenuInner.style.display = "block";
}
}
}
</script>

<div id="selectMenuOuter" style="filter:revealTrans; height=50; width=100;">
<select id="selectMenuInner">
<option>select menu</option>
<option>select menu</option>
<option>select menu</option>
</select>
</div>

<br>
<br>
<a href="javascript:showMenu(true)">show menu</a>
<a href="javascript:showMenu(false)">hide menu</a>

<div id="dropDownMenu" style="DISPLAY:none;BACKGROUND-COLOR: pink; LEFT: 10pt; POSITION: absolute; TOP: 1pt ">
Menu<br>
Menu<br>
Menu<br>
</div>

Important points to keep in mind:
1) for the selectMenuOuter (the shell) you need to define the filter and the size. If the latter is not specified, the filter dosn't work.
2) Better put some control to be sure that the javascript will not crash with different browsers (or to have the select hide completly).
3) the "selectMenuInner" can be another <div> which can host all the select that you need.
4) the "apply()" method freezes the content to give time to change the look before calling the "play()" method to apply the transaction. For the purpose of this job, we don't need to apply this second method, unless you want to...

Ok, I hope things are quite understanable and that you enjoy the script. But, moreover I hopt this could help you a bit.

Lorenzo