#8918 closed bug (invalid)
Submenu not displaying on top in IE
Reported by: | Joe T | Owned by: | Joe T |
---|---|---|---|
Priority: | minor | Milestone: | 1.10.0 |
Component: | ui.menu | Version: | 1.9.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
i have a menu plugin built on top of UI Menu that uses a toggle button. Current document structure looks like this:
- Window/HTML
- UI Dialog containing IFRAME
- IFRAME Window/HTML
- TABLE / TBODY / TD
- UI Menu UL
- TABLE / TBODY / TD
- IFRAME Window/HTML
- UI Dialog containing IFRAME
All works as expected in non-IE desktop browsers (mobile is irrelevant to my usage).
In IE, the submenu is not displaying on top. i can see when i hover the container LI that it's showing it (there's a slight change in the LI next to the submenu arrow), but it doesn't lay over the other content. i've tried adding a z-index, toggling inherited styles on/off in various combinations, but nothing will bring that submenu UL to the top.
The image below is from IE's debug tools selecting the submenu UL.
i realize a jsFiddle would be helpful, but i'm not sure how the IFRAME part works in jsFiddle. i kinda suspect it to be where the trouble is. Maybe.
Change History (13)
comment:1 Changed 10 years ago by
Owner: | set to Joe T |
---|---|
Status: | new → pending |
comment:2 Changed 10 years ago by
Status: | pending → new |
---|
Thanks for the response.
How do i add both the parent and iframe documents to the fiddle without linking to outside resources? The pages are for an intranet site & i can't link to them from outside. Sorry if it should be obvious, but i haven't used Fiddle very much.
Fiddle: http://jsfiddle.net/2LGp9/
It's not functional, mostly because i'm not fully sure how to make it so (multiple JS & HTML docs, etc.). The plugin i built on top of Menu is my first plugin effort, but as i said, the display works as expected in all but IE.
comment:3 Changed 10 years ago by
Status: | new → pending |
---|
We won't accept a test case that links to your intranet site, as we need something as small as possible in order to investigate. You can create multiple fiddles and use one for the parent frame and one for the iframe.
comment:4 Changed 10 years ago by
Status: | pending → new |
---|
Thanks for the tips. i don't intend to link to anything internal. i'll try to follow up again later this evening, or tomorrow.
comment:5 Changed 10 years ago by
Okay, a jsFiddle: http://jsfiddle.net/2LGp9/12/
It works, although it doesn't replicate the problem.
However, after digging into IE's dev tools, i found the problem!
For some reason, only in IE, an inline overflow:"hidden" style is applied to the master UL.
i've searched my code and can't find anything that applies an element-level overflow rule, and in any case, i'd have no reason to do it only in IE. In fact, the only use of "overflow:hidden" i can find is applied to body.newCSS.no-wrap - obviously not a UL. i'll continue to look & report back if i find anything.
Hoping this can at least be reviewed for any oddities in JUI...
comment:6 Changed 10 years ago by
Status: | new → pending |
---|
We'll keep this pending until you can provide code that shows the problem.
comment:7 Changed 10 years ago by
Status: | pending → new |
---|
i've stepped through the code one line at a time. Nothing in my code applies the overflow:hidden rule.
However, the slideDown animation does. When i change the show method to "show" from "slideDown", the menu displays as expected in my page.
The question i can't figure out is, why does the overflow CSS not get removed in IE in my particular page, but does in the Fiddle and other browsers?
comment:8 Changed 10 years ago by
For reference, i've reached this point with the Fiddle, trying to demonstrate the issue:
http://jsfiddle.net/2LGp9/16/
Still can't reproduce it in the demo, but i've verified that switching from the animation to a simple show/hide toggle fixes the display.
comment:9 Changed 10 years ago by
Status: | new → pending |
---|
Please stop setting the status back to new unless you're able to reproduce outside of your site.
comment:10 Changed 10 years ago by
Status: | pending → new |
---|
Sorry. i had no idea i was. The only option i have under "Modify Ticket" is "Leave as pending"...
comment:11 Changed 10 years ago by
Status: | new → pending |
---|
Hmm...that's strange, there must be a problem with Trac right now.
comment:12 Changed 10 years ago by
Resolution: | → invalid |
---|---|
Status: | pending → closed |
Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!
comment:13 Changed 10 years ago by
i wish i provide a reproduction of the issue in jsFiddle. So far, the one i built works as intended, despite my having added as many of the HTML layers as i could while keeping it simplified.
As noted before, i've determined the animation effect of opening/closing the menu is what leads to the overflow issue. i just can't reproduce it in a simpler page.
If i find time to build out the Fiddle until the issue occurs, i'll update again. In the meantime, a simple show/hide with no animation DOES allow the menu to work on my page.
Thanks.
You can add "/show" to the end of a jsFiddle URL to get out of the iframe. Please provide a reduced test case.