/
[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:
- when orange "Edit Content" button is clicked in "Content Mode", then screen is grayed out, but no modal window is appearing
- if modal window is appearing, then the CKEditor is larger (by 4px) then modal window itself:
Problems & Solutions
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; }
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; }