From 90c42f2a9cf5e13d08a63dbf45161277a3787a8f Mon Sep 17 00:00:00 2001 From: Bartosz-Do <1282324+codecalm@users.noreply.github.com> Date: Mon, 17 Aug 2026 11:22:23 +0200 Subject: [PATCH] Fix Tom Select dropdown losing z-index and colors to the bootstrap5 preset CSS (#2881) --- .changeset/fix-tom-select-dropdown-z-index.md | 5 ++++ core/scss/vendor/_tom-select.scss | 28 ++++++++++++------- 2 files changed, 23 insertions(+), 10 deletions(-) create mode 100644 .changeset/fix-tom-select-dropdown-z-index.md diff --git a/.changeset/fix-tom-select-dropdown-z-index.md b/.changeset/fix-tom-select-dropdown-z-index.md new file mode 100644 index 000000000..3f39205b0 --- /dev/null +++ b/.changeset/fix-tom-select-dropdown-z-index.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed Tom Select's `.ts-dropdown` losing its z-index, background, and colors to the bootstrap5 preset CSS. diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss index b4a60b393..e91372951 100644 --- a/core/scss/vendor/_tom-select.scss +++ b/core/scss/vendor/_tom-select.scss @@ -54,29 +54,37 @@ $input-border-width: 1px; } } +// Every declaration below is `!important`: the bootstrap5 preset CSS targets +// these same selectors at equal specificity, and whichever stylesheet is +// included last otherwise wins outright (not just for z-index — the preset's +// `--bs-*` vars are undefined outside Bootstrap, so once it wins a property it +// renders as transparent/unstyled rather than merely off-theme) (#2600). .ts-dropdown { - z-index: $zindex-dropdown; - color: var(--body-color); - background: var(--bg-surface); - box-shadow: var(--shadow-dropdown); + // Tabler inits Tom Select with dropdownParent: 'body', so the dropdown is a + // direct child of rather than of whatever contains the