Page Comparison

...

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: 

   Code Block
   language css
   .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: 

   Code Block
   language css title /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: 

   Code Block
   language css
   *, *: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: 

   Code Block
   language css title /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