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

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.X, 7.2.X, Master
• Fix Version/s: 7.0.0 DXP FP92, 7.0.10.14 DXP SP14, 7.0.X, 7.1.10 DXP FP18, 7.1.10.5 SP5, 7.1.X, 7.2.10 DXP FP5, 7.2.10.2 DXP SP2, 7.2.X, 7.3.10 DXP GA1, Master
• Component/s: Frontend Infrastructure
• Labels:
  • ee-ts
  • liferay-dxp-70-sp14
  • liferay-dxp-71-sp5
  • liferay-dxp-72-sp2
  • liferay-fixpack-de-92-7010
  • liferay-fixpack-dxp-18-7110
  • liferay-fixpack-dxp-5-7210
• Branch Version/s:
  7.2.x, 7.1.x, 7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/marcoscv-work/liferay-portal/pull/315

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