• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Problem of Combo box overlapping the menus.

 
shan blossom
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 367
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
shan blossom
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
shan blossom
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Then will anybody help me to solve this probelm in IE 6.0?
 
Andrey V. Ovcharenko
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic