• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Liutauras Vilda
  • Paul Clapham
Sheriffs:
  • paul wheaton
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Piet Souris
Bartenders:
  • Mike London

Problem of Combo box overlapping the menus.

 
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Ranch Hand
Posts: 367
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Sheriff
Posts: 67695
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Then will anybody help me to solve this probelm in IE 6.0?
 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.
 
Bear Bibeault
Sheriff
Posts: 67695
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67695
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67695
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
reply
    Bookmark Topic Watch Topic
  • New Topic