DataTables / DataTables/Dist-DataTables-Select-Bootstrap5

Select for BS5 does not handle table variants

Open
#1 2 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.