This week's book giveaway is in the Mac OS forum.
We're giving away four copies of a choice of "Take Control of Upgrading to Yosemite" or "Take Control of Automating Your Mac" and have Joe Kissell on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Problem of Combo box overlapping the menus. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Problem of Combo box overlapping the menus." Watch "Problem of Combo box overlapping the menus." New topic
Author

Problem of Combo box overlapping the menus.

shan blossom
Greenhorn

Joined: Sep 06, 2006
Posts: 17
I am using Menus in my JSP pages.while menus are listed all other html properties are not overlapping the menu and menu is displayed correctly.If there is any combo box in the Jsp page then menu is not displayed correctly because the combo box is overlapping the menu list.
Mathias Nilsson
Ranch Hand

Joined: Aug 21, 2004
Posts: 367
This is a HTML/Javascript question more than a JSP question.

The problem is that the select list has higher z-index than the layer, menu.

You can set visibility to hidden when showing the meny but this is not a very good solution. You could add a div around the dropdown and set the z-index for the div and z-index for he menu as higher.


SCJP1.4
shan blossom
Greenhorn

Joined: Sep 06, 2006
Posts: 17
I am using IE 6.0. In IE 6.0 z-index attribute is not available for select tag in html.Is there anyother way to avoid this overlapping.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

z-index is a CSS property, not an HTML one. But even so, it will not help you in IE 6.

Luckily, this is one of the few bugs that Microsoft addressed in IE 7.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
shan blossom
Greenhorn

Joined: Sep 06, 2006
Posts: 17
Then will anybody help me to solve this probelm in IE 6.0?
Andrey V. Ovcharenko
Greenhorn

Joined: Feb 15, 2007
Posts: 7
You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

There are few options with IE6.

One clumsy tactic that I've seen used fairly often, and even used myself a few times, is to hide all the select elements when the overlay is to be displayed, and then restore them when the overlay is dismissed. It's a pain, but it alleviates the issue.

Other than that, you can just move things around until there's no overlap -- a non-starter, if you ask me.

Or avoid the use of select elements.

I'm sorry but there's no magic bullet that just makes the problem go away short of requesting that your users use a more reasonable browser -- also usually a non-starter.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

Originally posted by Andrey V. Ovcharenko:
You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.


Andrey V. Ovcharenko, welcome to the Ranch. Please try to avoid using non-words like "behiv" when posting. Thanks.
ashimish mishra
Greenhorn

Joined: Apr 10, 2007
Posts: 1
Hey,
you can use frames to hide those dropdowns.
When ever you are opening the menu, open a dummy frame (full width and height, and transparent) just behind the menu.

You can have the frame created in a div and display it as soon as you open the menu. hide the div while closing the menu.

z-index of main page -> x
z-index of div containing dummy frame -> x+1
z-index of menu -> x+2

IE will automatically hide the dropdowns and as soon as you hide that frame, IE will show the dropdowns again.

You can use this trick for IE6. IE7 already takes care of setting proper z-index for dropdowns.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

ashimish is correct. That's another work-around that I forgot about. iframes are also drawn on top of everything else and so can be used to mask the dropdowns. iframes are tricky to work with, and it means that the code for the interior of the "popup" needs to be in a separate page, but the technique can be made to work.

It's pretty sad that developers need to go to such lengths just to get around such browser silliness.
 
GeeCON Prague 2014
 
subject: Problem of Combo box overlapping the menus.