Unable to override colsVisibility.css settings by theme CSS

[svenj69]

Enhancement/feature description

I see this loading order for CSS styles:

1. inline
2. tablefilter.css
3. theme's css
4. colsVisibility.css

That means I cannot easily override the styles defined in colsVisibility.css.

Why would the enhancement be useful to most users

To match the style of the colsVisibility extension to the theme, it would be beneficial if it is loaded before the theme's CSS style sheet.

Screenshots and GIFs

From Style Editor of Firefox

Describe alternatives you've considered

Overriding styles (width, margin) later with Javascript ...

TableFilter Version: 0.7.3 Browser and version: Edge 108.0.1462.46 (Official build) (64-bit), Firefox 102.5.0esr (64-bit OS and version: Windows 10, Linux Red Hat 7.9 Device: PC

[koalyptus]

Hi @svenj69, Extensions like Columns Visibility are loaded asynchronously with associated stylesheet, that's why you have that order. Not sure if a viable option for you, but you can define your own stylesheet for an extension, certainly some overhead involved:

var config = {
...
  extensions: [{
    name: 'sort',
    stylesheet: 'my-stylesheet.css' // needs to be placed in `/style` folder or location defined in `style_path` global configuration option
  }],
};

Cheers

[svenj69]

@koalyptus

thanks for the hint. I was not aware of the styelsheet option. This approach works for me.

Kind regards Sven