Dropdownlist z-index

[cjdrake]

I have a form with standard HTML drop down lists in.

When I position a table over the form using CSS absolute positioning, no matter how high I set the z-index the drop down lists always show through.

Is there any way to get them to stay behind the table?

Thanks in advance,

Chris

 

[LFI]

Have you tried setting the background-color of the table? I think I just tried something that is tangentially related to what you're describing and this did the trick.

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[ca8msm]

Why would you want to position a table over the top? If you don't want to see the list anymore, just hide it.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[cjdrake]

Hi Dave,

I've set the background-color of the table but they still show through.

It's so annoying, none of the other elements on the page show through! It's sending me crazy!

Thanks though!

 

[LFI]

Did you understand ca8msm's idea? You can use the CSS style DISPLAY or VISIBILITY elements and hide the SELECT list when it's "covered".

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cjdrake]

Thanks ca8msm.

The table forms a floating menu which moves down over the page, so it's not a case of hiding the inputs, I just want it to be consistent - it's very messy if the lists show through in the middle of the menu.

 

[MrGrey]

When you say 'drop down lists' I assume you are talking about SELECT elements.

SELECT elements are windowed controls and will be seen through everything regardless of their z-index.

Sorry.

 

[cjdrake]

Thanks MrGrey, that's what I needed to know.

 

[LFI]

The trick is, then, to KNOW where the SELECTs are so the moving DIV can avoid them, OR, to temporarily hide the SELECTs when the DIV moves over them.

If you can count on your users having JavaScript enabled, you can do the second method without too much difficulty.

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[kaht]

Hiding the select boxes can often be unappealing (especially when a portion of the select box would still be showing when it is partially covered). A common trick known as an iframe shim will help make the overlapping div perform like it should. Here a few links on the issue:

http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

http://weblogs.asp.net/bleroy/archive/2005/08/09/422047.aspx

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[LFI]

Now that I think about it, I've done something like that in the past. I think I created a fake drop-down list using a text box, an arrow, and a DIV. The real drop-down below it kept showing through, however, so I put an IFRAME in the DIV (or switched the DIV to an IFRAME) and it worked.

The solution in kaht's link is very simple. Good find!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cjdrake]

Thanks alot kaht, that's exactly the sort of effect I am after! Knew there would be some kind of workaround.

 

[kaht]

You're welcome

-kaht

How much you wanna make a bet I can throw a football over them mountains?