Child pages
  • [cms] CKEditor rendering in modal window issues [5.2.1]
Skip to end of metadata
Go to start of metadata

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

2 Comments

  1. Related commit in projects: rCCD15659.

  2. Another related problem just popped up - 2px gap between modal window start and actual content:

    Luckily this can be fixed by adding following CSS to the above mentioned "thickbox.css":

    .TB_closeWindowButton > img:first-child {
       vertical-align: bottom;
    }