diff --git a/css/ckeditor5-maximize.css b/css/ckeditor5-maximize.css index 065ba62..7199528 100644 --- a/css/ckeditor5-maximize.css +++ b/css/ckeditor5-maximize.css @@ -3,11 +3,19 @@ * Styles to maximize the editor. */ :root { - --ck-z-modal: 998 !important; + /* Keep editor modal elements above maximized item. */ + --ck-z-modal: 1002 !important; } body.ck-scroll-prevented { + /* Prevent double scroll bars with large content. */ overflow: hidden; } +.ck-maximize-active .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { + /* Force to ignore the space for admin-bar. */ + top: 0 !important; + /* Force full width. */ + width: 100% !important; +} .ck-maximize-active { position: fixed; top: 0; @@ -18,13 +26,9 @@ body.ck-scroll-prevented { flex-direction: column; height: 100vh; width: 100%; - z-index: 997; + z-index: 1001; overflow: auto; } -html.admin-bar .ck-maximize-active { - margin-top: 33px; - height: calc(100vh - 33px); -} .ck-maximize-active .ck.ck-editor { flex-grow: 1; } @@ -34,10 +38,3 @@ html.admin-bar .ck-maximize-active { .ck-maximize-active .ck.ck-content { height: 100%; } -/* In layout forms sticky header, height calc and positioning behave odd. */ -.layout-block-configure-form .ck-maximize-active .ck.ck-editor__main { - height: 70vh; -} -.layout-block-configure-form .ck-maximize-active .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { - position: static !important; -} diff --git a/js/plugins/backdrop-maximize/backdrop-maximize.js b/js/plugins/backdrop-maximize/backdrop-maximize.js index eb27a39..d2c361f 100644 --- a/js/plugins/backdrop-maximize/backdrop-maximize.js +++ b/js/plugins/backdrop-maximize/backdrop-maximize.js @@ -36,7 +36,9 @@ document.body.classList.add('ck-scroll-prevented'); button.isOn = true; } + window.dispatchEvent(new Event('resize')); editor.editing.view.focus(); + editor.editing.view.scrollToTheSelection(); }); return button;