ICEfaces
  1. ICEfaces
  2. ICE-8748

ace:dialog - Modal background rendered over the dialog in IE7

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.0.0.GA_P01, 3.2
    • Fix Version/s: EE-3.2.0.BETA, EE-3.2.0.GA, 3.3
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      IE7, IE8/9 Compat Mode
    • Assignee Priority:
      P2

      Description


      An ace:dialog is defined in an ace:tabPane/ace:tabSet. When the dialog is opened in IE7 or IE8/9 COmpat mode the dialog is rendered under the modal overlay, therefore preventing the dialog from being clicked.

        Activity

        Hide
        Arran Mccullough added a comment - - edited

        Attached test case and screen shot that shows the issue.

        Show
        Arran Mccullough added a comment - - edited Attached test case and screen shot that shows the issue.
        Hide
        Arturo Zambrano added a comment - - edited

        The issue seems to be caused by IE7's own way of handling the z-index of elements, where the actual order in which elements are displayed not only depends on the numeric values of their z-index properties alone, but their 'stacking' contexts' also determine this order. So, if a parent element has a lower z-index, no matter how high we set the z-index of the dialog, it will always be displayed under the overlay. For example, if the dialog is placed outside of the tab set (i.e. no parent elements), then the dialog will be displayed correctly on top of the overlay.

        Show
        Arturo Zambrano added a comment - - edited The issue seems to be caused by IE7's own way of handling the z-index of elements, where the actual order in which elements are displayed not only depends on the numeric values of their z-index properties alone, but their 'stacking' contexts' also determine this order. So, if a parent element has a lower z-index, no matter how high we set the z-index of the dialog, it will always be displayed under the overlay. For example, if the dialog is placed outside of the tab set (i.e. no parent elements), then the dialog will be displayed correctly on top of the overlay.
        Hide
        Arturo Zambrano added a comment - - edited

        Committed fix to trunk at revision 32185.
        After trying several possible solutions, what solved the problem was to bring the modal dialog overlay element to the same dom tree level as the dialog root node, so that the specified z-index values are handled as they were initially intended. This is done only for IE7 browsers. The fix had to go in the jquiery-ui code because it's not possible to access the reference to the overlay node from outside of that code. This fix was also tested outside of a tabset, and it doesn't affect the component in that case. The same situation was present with ace:confirmationDialog. This fix solves the problem for both components.
        Testing notes: Just make sure that the dialog is always displayed on top of the overlay in every browser, inside or outside a tabset component.

        Show
        Arturo Zambrano added a comment - - edited Committed fix to trunk at revision 32185. After trying several possible solutions, what solved the problem was to bring the modal dialog overlay element to the same dom tree level as the dialog root node, so that the specified z-index values are handled as they were initially intended. This is done only for IE7 browsers. The fix had to go in the jquiery-ui code because it's not possible to access the reference to the overlay node from outside of that code. This fix was also tested outside of a tabset, and it doesn't affect the component in that case. The same situation was present with ace:confirmationDialog. This fix solves the problem for both components. Testing notes: Just make sure that the dialog is always displayed on top of the overlay in every browser, inside or outside a tabset component.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: