From f32b66e6d665de3234e5adbb32e2df1668e4d6d2 Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 21 Aug 2020 08:36:37 +0200 Subject: [PATCH 1/2] Fix z-index for the toolbar dropdown panels. --- .../ckeditor5-ui/theme/components/dropdown/dropdown.css | 8 ++++++++ packages/ckeditor5-ui/theme/globals/_zindex.css | 1 + 2 files changed, 9 insertions(+) diff --git a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css index 395045a1861..4277ebb1ebb 100644 --- a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css +++ b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css @@ -65,3 +65,11 @@ } } } + +/* + * Toolbar dropdown panels should be always above the UI (eg. other dropdown panels) from the editor's content. + * See https://github.com/ckeditor/ckeditor5/issues/7874 + */ +.ck.ck-toolbar .ck-dropdown__panel { + z-index: var(--ck-z-toolbar-dropdown-panel); +} diff --git a/packages/ckeditor5-ui/theme/globals/_zindex.css b/packages/ckeditor5-ui/theme/globals/_zindex.css index 5adc37ba483..14ef913304f 100644 --- a/packages/ckeditor5-ui/theme/globals/_zindex.css +++ b/packages/ckeditor5-ui/theme/globals/_zindex.css @@ -6,4 +6,5 @@ :root { --ck-z-default: 1; --ck-z-modal: calc( var(--ck-z-default) + 999 ); + --ck-z-toolbar-dropdown-panel: calc( var(--ck-z-modal) + 1 ); } From ca3788d421c2ee1208e5cd482325c1edc3d24e90 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 21 Aug 2020 12:11:45 +0200 Subject: [PATCH 2/2] It is unlikely the --ck-z-toolbar-dropdown-panel custom property will be used again somewhere else because it is too specific. --- packages/ckeditor5-ui/theme/components/dropdown/dropdown.css | 2 +- packages/ckeditor5-ui/theme/globals/_zindex.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css index 4277ebb1ebb..e8a2bb90e6a 100644 --- a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css +++ b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css @@ -71,5 +71,5 @@ * See https://github.com/ckeditor/ckeditor5/issues/7874 */ .ck.ck-toolbar .ck-dropdown__panel { - z-index: var(--ck-z-toolbar-dropdown-panel); + z-index: calc( var(--ck-z-modal) + 1 ); } diff --git a/packages/ckeditor5-ui/theme/globals/_zindex.css b/packages/ckeditor5-ui/theme/globals/_zindex.css index 14ef913304f..5adc37ba483 100644 --- a/packages/ckeditor5-ui/theme/globals/_zindex.css +++ b/packages/ckeditor5-ui/theme/globals/_zindex.css @@ -6,5 +6,4 @@ :root { --ck-z-default: 1; --ck-z-modal: calc( var(--ck-z-default) + 999 ); - --ck-z-toolbar-dropdown-panel: calc( var(--ck-z-modal) + 1 ); }