From c235f6b8b3f36664de7fb0442541dd465519df0b Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 31 Dec 2023 16:21:05 +0900 Subject: [PATCH] Adjust min-height to Prevent layout shift when CKEditor is loaded https://xetown.com/questions/1801094 --- common/js/plugins/jquery.fileupload/css/style.css | 5 ++--- modules/editor/skins/ckeditor/editor.html | 13 ++++++++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/common/js/plugins/jquery.fileupload/css/style.css b/common/js/plugins/jquery.fileupload/css/style.css index ed70620fe..098ee2d79 100644 --- a/common/js/plugins/jquery.fileupload/css/style.css +++ b/common/js/plugins/jquery.fileupload/css/style.css @@ -240,8 +240,7 @@ button.xefu-btn { p.xefu-dropzone-message { display: inline-block; - margin: 0; - margin-left: 5px; + margin: 0 0 0 5px !important; line-height: 24px; vertical-align: middle; } @@ -308,4 +307,4 @@ p.xefu-dropzone-message { .color_scheme_dark.cke_auto_dark_mode .xefu-container .xefu-btn>input, .color_scheme_dark.cke_auto_dark_mode .xefu-container .xefu-btn>span { color: #eee; -} \ No newline at end of file +} diff --git a/modules/editor/skins/ckeditor/editor.html b/modules/editor/skins/ckeditor/editor.html index 6726ccdd2..a92630b4d 100644 --- a/modules/editor/skins/ckeditor/editor.html +++ b/modules/editor/skins/ckeditor/editor.html @@ -15,7 +15,18 @@ $filemtime2 = file_exists(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') ? filemtime(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') : 0; $filemtimestamp = max($filemtime1, $filemtime2, $editor_config_timestamp ?? 0); - $editor_height_fixed = $editor_height + ($editor_toolbar_hide ? 58 : ($editor_toolbar === 'simple' ? 74 : 140)); + // Start with fixed min-height to prevent layout shift when editor is loaded. + if ($editor_toolbar_hide): + $editor_height_fixed = $editor_height + 55; + elseif ($editor_toolbar === 'simple'): + $editor_height_fixed = $editor_height + 71; + else: + $editor_height_fixed = $editor_height + 137; + endif; + + if (str_contains($_SERVER['HTTP_USER_AGENT'], 'Firefox/')): + $editor_height_fixed += 2; + endif; }