Closed jlayt closed 1 week ago
My apologies, further testing shows that the styles are not apply to any Dash components, in spite of the CSS downloading and the class beign correclty set. There must be something else going on with my code that is breaking things.
Ah, not having a great day, getting myself confused...
Recreated with a minimal example with Dropdowns and a DataTable wrapped in a container. Using dbc as class on the container the Bootstrap styles are applied to the Dropdowns but not to the DataTable buttons and pagination. The DataTable does get the fonts applied, and the cell borders and header background but they look broken.
Manually removing the dbc class from the container using Dev Tools removes the Bootstrap styling from all teh components, including the font styles and borders on the DataTable. Manually adding dbc again back restores the Bootstrap styles again.
With dbc class set on container:
With dbc class removed from container:
Apologies for my confusion!
Hi @jlayt
Styling that export button in the DataTable is tricky. You can find a discussion and some workarounds on the forum https://community.plotly.com/t/styling-the-export-button-in-datatable/38798/9
The solution from the forum would be good if you are not switching themes. Since there is no general solution that works well with all Bootstrap themes, I haven't added this feature to the dbc
class here.
Another workaround is to add a clientside callback that adds a bootstrap class to the export button so it looks like this:
<button class="export btn btn-primary">Export</button>
That's a little tricky as well, since you have to make sure the table is rendered before adding the classes. Let me know if you want to do this, and I might be able to help.
Another solution is to use dash-ag-grid. You can add your own button to export the data.
The Data Table pagination and export button do not adopt the Bootstrap styling, but text does. Example shown here with Flatly theme. I've tried adding a class of dbc at both at the top Container level and in an enclosing Div as shown in the example, but neither works.