[Bug Report] The Latest (v4.0.1) FixedColumns Extension doesn't work with bootstrap themes

shrektan

Hi,

I think there's a bug introduced by the latest version of FixedColumns Extension. Let's say if I use bootstrap4 theme "superhero" for the HTML page and put a datatable inside. If I enable the FixedColumn extension, the table's style will change.

Please check the two jsfiddle examples that I created, with or without fixedcolumns extension.

Without FixedColumns

https://jsfiddle.net/shrektan/cL9artsm/2/

With FixedColumns

https://jsfiddle.net/shrektan/0tsoezd2/4/

colin

Yep, something looks odd. We'll take a look and report back, though it'll likely be the end of the week,

Colin

sandy

Hi @shrektan ,

Because FixedColumns is now using position: sticky it is necessary to set a background color on the cells within the table. If you don't do this then you end up with the scrolling cell text being displayed behind the fixed cells.

The solution to this is going to be for you to overwrite the css provided with some custom css. I've made a start on changing your example, I'm sure you can manage to make the final changes to get it to all match.

Thanks,
Sandy

shrektan

Hi @sandy ,

Thanks for the reply. Yes, I can use CSS as a temporary solution.

But, is it possible to get fixed in datatable itself? I mean, when enabling FixedColumns, the CSS could be set automatically.

Thanks,
Xianying

shrektan

How about including something like below in FixedColumns?

thead th, tr td {
  background-color: var(--bs-table-active-bg) !important;
  color: var(--bs-table-active-color) !important;
}

sandy

Hi @shrektan ,

Unfortunately not, some of the values that could be set there by bootstrap are transparent or slightly transparent - so the issue I stated above would still be present.

Thanks,
Sandy