DataTables / DataTables/Dist-DataTables-Select-Bootstrap5
Select for BS5 does not handle table variants
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 1
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
When using BS5 table variants like "table-light", "table-dark" etc select does not draw/coloring as expected.
See example http://live.datatables.net/huhaciwu/1/edit (with and without table variant enable)
Default BS5 sets the --bs-table-bg: transparent, but when you use "table-light" then coloring is --bs-table-bg: #f8f9fa;
Tried to put "!important" behind the coloring of "background-color" in the select.css, without any effect.
Note on variants: https://getbootstrap.com/docs/5.0/content/tables/
This is what happens behind the "scenes".
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue using the linked live.datatables.net example with and without Bootstrap 5 table variants. Start by inspecting select.css and the Bootstrap table variant documentation, then compare the selection styling under the default and table-light/table-dark cases. Done means Select renders the expected coloring for both default tables and supported table variants.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100