Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 21:31:28 +04:00
Code Issues Projects Releases Wiki Activity

Fix Tom Select dropdown losing z-index and colors to the bootstrap5 preset CSS (#2881)

Browse Source
This commit is contained in:
Bartosz-Do
2026-08-17 11:22:23 +02:00
committed by GitHub
parent 6e6084ad20
commit 90c42f2a9c
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/vendor/_tom-select.scss
Vendored
+18 -10
View File
@@ -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 <body> rather than of whatever contains the <select>. A
// select inside a modal therefore needs a z-index above the modal's, not
// just above other in-flow content.
z-index: $zindex-popover !important;
color: var(--body-color) !important;
background: var(--bg-surface) !important;
box-shadow: var(--shadow-dropdown) !important;
.option {
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
}
// Override TomSelect's bootstrap5 preset which references --bs- vars not available in Tabler (#2600)
.active {
color: var(--body-color);
background-color: var(--active-bg);
color: var(--body-color) !important;
background-color: var(--active-bg) !important;
}
.active.create {
color: var(--body-color);
color: var(--body-color) !important;
}
.optgroup-header {
color: var(--body-color);
background: var(--bg-surface);
color: var(--body-color) !important;
background: var(--bg-surface) !important;
}
}