Submenu not displaying on top in IE

[Joe T]

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

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.

[Scott González]

You can add "/show" to the end of a jsFiddle URL to get out of the iframe. Please provide a reduced test case.

[Joe T]

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.

[Scott González]

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.

[Joe T]

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.

[Joe T]

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...

[Scott González]

We'll keep this pending until you can provide code that shows the problem.

[Joe T]

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?

[Joe T]

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.

[Scott González]

Please stop setting the status back to new unless you're able to reproduce outside of your site.

[Joe T]

Sorry. i had no idea i was. The only option i have under "Modify Ticket" is "Leave as pending"...

[Scott González]

Hmm...that's strange, there must be a problem with Trac right now.

[trac-o-bot]

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!

[Joe T]

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.