Bootstrap 5 Integration

IMTanuki

Trying to integrate DT with BS5 - esp the color scheme setup in _variables.scss.

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src d0wnloaded consolidated DT css and js files.

problem
I'm importing the DT css into my SCSS build and, in most cases, it looks like the class references used by DT are correct. But the dropdown for the num records to display (10-25-50...) clearly is not picking up my color scheme.

• is there any docum that lists each DT feature and the classes it uses?

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

thx

IMTanuki

Same issue when using the theme creator:
https://datatables.net/manual/styling/theme-creator

screenshot of params:
https://imtanuki.tinytake.com/tt/NTUyNTgwMl8xNzIyODI0Mg

screenshot of table:
https://imtanuki.tinytake.com/tt/NTUyNTgwN18xNzIyODI2Mg

allan

Hi,

We do not yet make use of Bootstrap 5's CSS variables. Is that where you are expecting the colouring for the dropdown to come from?

Allan

IMTanuki

Hi Allan,

Many thx for the quick reply!

TBH, I'm only halfway thru customizing bootstrap's _variables.scss and I haven't finished with pagination and forms...

So, can I just confirm
- is DT is generating code for all its controls using standard bootstrap form, pagination, etc. classes?

• DT is indirectly using _variables.scss vis a vis the bootstrap classes referenced in the control classes?

Sorry if these questions are a big pedestrian - just started with DT and also relatively new to bootstrap...and DT is, as you've noted in the docum, a big project...:>)

allan

is DT is generating code for all its controls using standard bootstrap form, pagination, etc. classes?

Yes.

DT is indirectly using _variables.scss vis a vis the bootstrap classes referenced in the control classes?

DataTables isn't no. However, I looking over the DataTables / Bootstrap 5 stylesheet last night for another thread and we don't set colours in it, so I'm not sure where the incorrect colour you are seeing is coming from.

If you can post a link to a test case showing the issue, we can take a look into it.

Thanks,
Allan

IMTanuki

Allan,

Sorry for all the thrashing.

I successfully added the correct className for the export Excel button and that works fine - for some odd reason, I assumed DT was customized via SASS, but it's clearly easier to add the className to DT elements.

I'm now trying to do the same thing for the page length dropdown control. But I'll close this post out (it's getting too messy) and open a new post if I can't figure out where to add the className property for the page length control.

Thx!