/
[cms] CKEditor rendering in modal window issues [5.2.1]

[cms] CKEditor rendering in modal window issues [5.2.1]

I've recently stumbled upon following problems with CKEditor rendering in modal windows:

  1. when orange "Edit Content" button is clicked in "Content Mode", then screen is grayed out, but no modal window is appearing
  2. if modal window is appearing, then the CKEditor is larger (by 4px) then modal window itself:

Problems & Solutions

  1. this is caused by jquery-ui.css file (that is usually included from CDN) and specifically by following selector: 

    .ui-resizable { position: relative; }

    In the thickbox.css file (that is used in Admin Console and included, when site is viewed in Content Mode) we should add following CSS: 

    /core/admin_templates/js/jquery/thickbox/thickbox.css
     .ui-resizable { position: absolute; }
  2. this is caused by following selector, that is usually present in modern website slice-ups to overcome box model issues in different browsers: 

    *, *:before, *:after {
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }

    In the thickbox.css file (that is used in Admin Console and included, when site is viewed in Content Mode) we should add following CSS: 

    /core/admin_templates/js/jquery/thickbox/thickbox.css
    #TB_window, .TB_window {
    	-moz-box-sizing: content-box;
    	-webkit-box-sizing: content-box;
    	box-sizing: content-box;
    }

Related Tasks

INP-1434 - Getting issue details... STATUS