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

              Ascending order - Click to sort in descending order
              Migration created issue -
              Hide
              Permalink
              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
              Permalink
              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.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #32185 Fri Nov 16 15:26:54 MST 2012 art.zambrano ICE-8748 added code to bring the modal dialog overlay to the same dom tree level as the dialog itself, so that the overlay doesn't appear on top of the dialog
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/jquery/ui/jquery-ui.js
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/jquery/ui/readme.txt
              Migration made changes -
              Field Original Value New Value
              Reporter Migration [ remote ] Arran Mccullough [ arran.mccullough ]
              Migration made changes -
              Assignee Arturo Zambrano [ artzambrano ]
              Fix Version/s EE-3.2.0.GA [ 10332 ]
              Assignee Priority P2 [ 10011 ]
              Hide
              Permalink
              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.
              Migration made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Migration made changes -
              Fix Version/s 3.3 [ 10370 ]
              Migration made changes -
              Attachment Case11751Example.zip [ 14994 ]
              Ken Fyten made changes -
              Fix Version/s EE-3.2.0.BETA [ 10573 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #34047 Fri Mar 22 18:56:39 MDT 2013 nils.lundquist ICE-8920 - Updated JQuery UI to 1.10.2
              ICE-8748 - Moved fix from JQUI modification into component code
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/util/HTML.java
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/jquery/ui/jquery-ui.js
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionRenderer.java
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.js
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #34075 Tue Mar 26 12:20:25 MDT 2013 nils.lundquist Revert: ICE-8920 - Updated JQuery UI to 1.10.2 - Moving to 3.4
              Revert: ICE-8748 - Moved fix from JQUI modification into component code - Moving to 3.4
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/util/HTML.java
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/jquery/ui/jquery-ui.js
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionRenderer.java
              Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.js
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: