Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-111558

Liferay pop-ups are not visible when CKEditor is in full-screen mode

    Details

      Description

      We are setting the z-index of our notification container to 5000. This value is fairly low for system warnings and many 3rd party solution could interfere with it, like ckeditor in full window mode. Ckeditor is setting the z-index from 9995, hence hiding our system notifications.

      To simply validate the issue without deploying custom code (use chrome for simplicity):

      • Put the two properties in the portal-ext below:
      • editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=ckeditor
      • session.timeout=1
      • Change the session timeout value in the webapps/root/web-inf/web.xml to 2
      • Start the bundle
      • log in and wait 2minutes for the session notification to appear
      • right-click on the notification -> inspect (developer tools appear with the 'Elements' tab open)
      • Select the following element (should be visible after clicking inspect):
        <div class="lfr-notification-container">
        .....
        </div>
        
      • Check the applied styles on the left side of the developer tool:
        .lfr-notification-container {
            max-height: 100%;
            max-width: 400px;
            overflow: auto;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 15px;
            position: fixed;
            right: 0;
            top: 10px;
            width: 100%;
            z-index: 5000;
        }
        
      • Actual: The z-index is 5000 (as above)
      • Expected: The z-index is marginally higher, like '99999'

      Steps to reproduce the issue with custom ckeditor plugin:

      • Put the two properties in the portal-ext below:
      • editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=ckeditor
      • session.timeout=1
      • Change the session timeout value in the webapps/root/web-inf/web.xml to 2
      • Start the bundle
      • Deploy the CKEditor config and plugin(attachments can be found at LPP-36888 for 7.0.x)
      • Open a new web content and put the editor into full screen
        Expected behavior: 'Session will expire' and 'Session expired' messages should be visible above the editor
        Actual behavior: Messages are seemingly hidden behind the editor and you'll be logged out after 2 minutes without a visible warning

      Additional note:
      As the z-index is stored as a 32-bit signed integer, we can have a maximum value of 2,147,483,467
      Meaning we have quite a bit of breathing room to assign a value that makes sense in our environment. We could categorise our components where we use z-index in hierarchy, and assign a value-range that corresponds with that given category.
      For example:

      < 0	Background Elements	 
      0 – 4,999	Main Content
      5,000 – 90,000 Pop-up Elements, modals
      90,001 – 1,000,000 System warnings
      1,000,001 > Full Page overlays 
      

      Just an improvement idea

        Attachments

          Activity

            People

            Assignee:
            summer.zhang Summer Zhang
            Reporter:
            norbert.nemeth Norbert Németh
            Participants of an Issue:
            Recent user:
            Jason Pince
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Days since last comment:
              25 weeks, 4 days ago

                Packages

                Version Package
                7.0.0 DXP FP92
                7.0.X
                7.1.10 DXP FP18
                7.1.X
                7.2.10 DXP FP5
                7.2.10.2 DXP SP2
                7.2.X
                7.3.10 DXP GA1
                Master