Skip to main content

Search and Top Navigation

#8918 closed bug (invalid)

Opened December 17, 2012 06:35PM UTC

Closed January 02, 2013 08:43AM UTC

Last modified January 02, 2013 08:51AM UTC

Submenu not displaying on top in IE

Reported by: cautionbug Owned by: cautionbug
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

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.

[[Image(http://i45.tinypic.com/29dfmlj.png)]]

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.

Attachments (0)
Change History (13)

Changed December 17, 2012 06:36PM UTC by scottgonzalez comment:1

owner: → cautionbug
status: newpending

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

Changed December 17, 2012 08:12PM UTC by cautionbug comment:2

status: pendingnew

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.

Changed December 17, 2012 08:23PM UTC by scottgonzalez comment:3

status: newpending

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.

Changed December 17, 2012 08:26PM UTC by cautionbug comment:4

status: pendingnew

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.

Changed December 18, 2012 08:23PM UTC by cautionbug comment:5

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.

[[Image(http://i48.tinypic.com/205z876.png)]]

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

Changed December 18, 2012 08:29PM UTC by scottgonzalez comment:6

status: newpending

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

Changed December 18, 2012 10:37PM UTC by cautionbug comment:7

status: pendingnew

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?

Changed December 18, 2012 11:54PM UTC by cautionbug comment:8

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.

Changed December 19, 2012 02:20AM UTC by scottgonzalez comment:9

status: newpending

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

Changed December 19, 2012 02:22AM UTC by cautionbug comment:10

status: pendingnew

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

Changed December 19, 2012 02:24AM UTC by scottgonzalez comment:11

status: newpending

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

Changed January 02, 2013 08:43AM UTC by trac-o-bot comment:12

resolution: → invalid
status: pendingclosed

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!

Changed January 02, 2013 08:51AM UTC by cautionbug comment:13

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.