ICEfaces
  1. ICEfaces
  2. ICE-9073

IE7 ace:menuBar not visible on top of position:relative components

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Won't Fix
    • Affects Version/s: EE-3.2.0.GA
    • Fix Version/s: 3.3
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      IE7
      Tomcat 7
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Compatibility/Configuration

      Description

      In IE7, when the ace:menuBar menuitems are made visible, if there is a component underneath with position:relative, it will be visible instead of the menuitem. I have observed this with position: relative in the css styles .ui-button, .ui-panel .ui-panel-titlebar.

      Run the attached war file in Tomcat 7. In IE7, you will see the ace:menuBar inside a tab. Make a selection from the menuBar, this will populate the tab content and an 'Export to Excel' button will show up on the page. Once more, attempt to make a menuBar selection - you will see the "Export to Excel" button overlap the menuitems.

        Activity

        Hide
        Ken Fyten added a comment -

        Reminder to document as known issue for IE7.

        Show
        Ken Fyten added a comment - Reminder to document as known issue for IE7.
        Hide
        Arturo Zambrano added a comment -

        Marking issue as won't fix after several attempts to fix this issue in IE7.

        The main problem is that IE7 doesn't fully comply with CSS standards. It creates a new "stacking context" for every element that has 'position:relative'. This way, z-index values are only relative to the current stacking context; they don't apply to other stacking contexts (i.e. elements with 'postion:relative') that appear later in the HTML markup. So, for example, if we specify a z-index of 10000 on element A, which covers a big part of the viewport, but whose markup appears earlier in the HTML document, and we have another element B that appears later in the HTML document and has 'position:relative' and shares part of the area that element A, then element B will always appear on top of element A.

        Some of the approaches to get around this situation invlove modifying all other elements on the page that have 'position:relative', but that would require specific knowledge of the page and it wouldn't be acceptable since that could create plenty of side effects.

        The approach that was tried consists in dynamically creating a transparent iframe that is placed below the menu and above everything else, a similar approach used in ace:autoCompleteEntry. However, in the case of the menu components, because of all the complex styling ancestry of these components and for other unknown reasons, this approach didn't work, despite trying several different variations and workarounds. In some cases the approach seemed to work but iframe prevented the user from interacting with the displayed submenu. In other cases, the iframe also appeared below the 'position:relative' element, and in some other cases it caused some odd behaviours in the component.

        The only possible workaround is to rearrange the page to avoid having these 'position:relative' elements near the menu.

        Show
        Arturo Zambrano added a comment - Marking issue as won't fix after several attempts to fix this issue in IE7. The main problem is that IE7 doesn't fully comply with CSS standards. It creates a new "stacking context" for every element that has 'position:relative'. This way, z-index values are only relative to the current stacking context; they don't apply to other stacking contexts (i.e. elements with 'postion:relative') that appear later in the HTML markup. So, for example, if we specify a z-index of 10000 on element A, which covers a big part of the viewport, but whose markup appears earlier in the HTML document, and we have another element B that appears later in the HTML document and has 'position:relative' and shares part of the area that element A, then element B will always appear on top of element A. Some of the approaches to get around this situation invlove modifying all other elements on the page that have 'position:relative', but that would require specific knowledge of the page and it wouldn't be acceptable since that could create plenty of side effects. The approach that was tried consists in dynamically creating a transparent iframe that is placed below the menu and above everything else, a similar approach used in ace:autoCompleteEntry. However, in the case of the menu components, because of all the complex styling ancestry of these components and for other unknown reasons, this approach didn't work, despite trying several different variations and workarounds. In some cases the approach seemed to work but iframe prevented the user from interacting with the displayed submenu. In other cases, the iframe also appeared below the 'position:relative' element, and in some other cases it caused some odd behaviours in the component. The only possible workaround is to rearrange the page to avoid having these 'position:relative' elements near the menu.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Brad Kroeger
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: