ICEfaces
  1. ICEfaces
  2. ICE-7256

The modal overlay for the ace:dialog is covering the dialog in Williams POC

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Major Major
          • Resolution: Won't Fix
          • Affects Version/s: 3.0
          • Fix Version/s: 3.0
          • Component/s: None
          • Labels:
            None
          • Environment:
            IE7
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide
            Quick fix for dialog issue is to set position of tabset to static:
            <ace:tabSet id="tabSet" style="position:static;" ...
            (Tested with FF and also IE9. Seemed OK.)
            Show
            Quick fix for dialog issue is to set position of tabset to static: <ace:tabSet id="tabSet" style="position:static;" ... (Tested with FF and also IE9. Seemed OK.)

            Description

            The modal overlay for the ace:dialog is covering the dialog in Williams POC. (Click Detail button in Screen 1.)

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              yip.ng added a comment -

              The dialog problem could be caused by the tabset. If we don't use tabset then it works fine. See video at http://screencast.com/t/uBYkky6E9m. Here is simplified test code:

              <!-<ace:tabSet>->

              <!-<ace:tabPane>->
              <ui:include src="./tabs/detailPopup.xhtml"/>
              <ui:include src="./tabs/screen1.xhtml"/>
              <!-</ace:tabPane>->

              <!-</ace:tabSet>->

              Works if tabset commented out; remove comments and problem appears. So we can be sure that something in tabset is interfering with dialog in IE7?

              Show
              yip.ng added a comment - The dialog problem could be caused by the tabset. If we don't use tabset then it works fine. See video at http://screencast.com/t/uBYkky6E9m . Here is simplified test code: <!- <ace:tabSet> -> <!- <ace:tabPane> -> <ui:include src="./tabs/detailPopup.xhtml"/> <ui:include src="./tabs/screen1.xhtml"/> <!- </ace:tabPane> -> <!- </ace:tabSet> -> Works if tabset commented out; remove comments and problem appears. So we can be sure that something in tabset is interfering with dialog in IE7?
              Hide
              Permalink
              yip.ng added a comment -

              Quick fix for dialog issue is to set position of tabset to static:
              <ace:tabSet id="tabSet" style="position:static;" ...
              (Tested with FF and also IE9. Seemed OK.)

              See screenshot 1.

              Somehow the relative position (set by YUI stylesheet) of the tabset was creating an extra stacking context in IE7 which is below the overlay. Since the dialog belongs to the tabset, it is also pulled under. (No matter how high a z-index you give it.)

              Still can't figure out how this happens in IE7 only. The overlay in IE is nowhere to be found in the HTML inspection tab or the source view, so it's impossible to investigate further. (In FF, it clearly shows as a div appended at the end of body.)

              Show
              yip.ng added a comment - Quick fix for dialog issue is to set position of tabset to static: <ace:tabSet id="tabSet" style="position:static;" ... (Tested with FF and also IE9. Seemed OK.) See screenshot 1. Somehow the relative position (set by YUI stylesheet) of the tabset was creating an extra stacking context in IE7 which is below the overlay. Since the dialog belongs to the tabset, it is also pulled under. (No matter how high a z-index you give it.) Still can't figure out how this happens in IE7 only. The overlay in IE is nowhere to be found in the HTML inspection tab or the source view, so it's impossible to investigate further. (In FF, it clearly shows as a div appended at the end of body.)
              Hide
              Permalink
              Ken Fyten added a comment -

              Seems like this style change should be made to be applied automatically by the component renderer when IE7 is detected (or all the time)?

              Show
              Ken Fyten added a comment - Seems like this style change should be made to be applied automatically by the component renderer when IE7 is detected (or all the time)?
              Hide
              Permalink
              yip.ng added a comment - - edited

              If all the time, then just need to change the CSS in stylesheet.

              If IE7 only, then need to figure how to do it in YUI tabset JS.

              Either way need someone familiar with app. to make sure it doesn't affect the layout of other elements contained in tabset.

              Show
              yip.ng added a comment - - edited If all the time, then just need to change the CSS in stylesheet. If IE7 only, then need to figure how to do it in YUI tabset JS. Either way need someone familiar with app. to make sure it doesn't affect the layout of other elements contained in tabset.
              Hide
              Permalink
              Ken Fyten added a comment -

              We'll need to rely on app-level styling workaround for the time-being.

              Show
              Ken Fyten added a comment - We'll need to rely on app-level styling workaround for the time-being.

                People

                • Assignee:
                  yip.ng
                  Reporter:
                  yip.ng
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  0 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: