Adjust min-height to Prevent layout shift when CKEditor is loaded

https://xetown.com/questions/1801094
This commit is contained in:
Kijin Sung 2023-12-31 16:21:05 +09:00
parent 6328005ace
commit c235f6b8b3
2 changed files with 14 additions and 4 deletions

View file

@ -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;
}
}

View file

@ -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;
}
<!-- CSS -->