ICEfaces
  1. ICEfaces
  2. ICE-11145

ace:dialog - modal layer shown infront of dialog with custom CSS applied on page

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-4.1.0.GA, EE-3.3.0.GA_P04
    • Fix Version/s: 4.2.BETA, 4.2, EE-3.3.0.GA_P05
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Firefox, Chrome

      Description

      In this scenario in Chrome and Firefox (not IE11) when an ace:dialog is shown the modal layer is show in front of the dialog, making it impossible to close or interact with.

      The root cause of this issue is the addition of some custom CSS which is applied to a div that is a parent/container of the dialog content. For example:

      <div style="position: fixed;">
           <ace:dialog id="testDialog"
                  modal="true"
                  closable="true"
                  header="Test Dialog"
                  styleClass="dialog"
                  draggable="false">
                              <h:outputText value="Test Dialog"/>
           </ace:dialog>
      </div>

      Testing with the latest code base (EE 3.3.x and 4.x) it looks like this issue has been resolved but another behavior is shown. The modal layer is placed correctly behind the dialog content but the modal layer only is shown for the content in the <div style="position: fixed;">, anything outside of this is not effected by the modal layer.

        Activity

        Hide
        Arran Mccullough added a comment -

        Attached test case that shows the most recent behavior on the ICEfaces 4 trunk.

        Steps:

        • Load welcomeICEfaces.jsf
        • Click the "Open Dialog" button. The modal layer is shown behind the dialog but only for the contents of the div.
        Show
        Arran Mccullough added a comment - Attached test case that shows the most recent behavior on the ICEfaces 4 trunk. Steps: Load welcomeICEfaces.jsf Click the "Open Dialog" button. The modal layer is shown behind the dialog but only for the contents of the div.
        Hide
        Arran Mccullough added a comment -

        Note, I believe the change in behavior is due to the fixes made in ICE-10976

        Show
        Arran Mccullough added a comment - Note, I believe the change in behavior is due to the fixes made in ICE-10976
        Hide
        Mircea Toma added a comment -

        Changed overlay's positioning to 'fixed' to have its coordinates interpreted as relative to the viewport.

        Show
        Mircea Toma added a comment - Changed overlay's positioning to 'fixed' to have its coordinates interpreted as relative to the viewport.
        Hide
        Carmen Cristurean added a comment - - edited

        Verified ICEfaces4 trunk r49332/ICEfaces EE-3.3.0-maintenance branch r49332 with attached test case on Firefox47, Chrome53, IE11/Windows7; MS Edge38/Windows10.
        Ran showcase > dialog tests and ACE dialog QA regressions on Chrome53/FF47.

        Show
        Carmen Cristurean added a comment - - edited Verified ICEfaces4 trunk r49332/ICEfaces EE-3.3.0-maintenance branch r49332 with attached test case on Firefox47, Chrome53, IE11/Windows7; MS Edge38/Windows10. Ran showcase > dialog tests and ACE dialog QA regressions on Chrome53/FF47.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: