✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Dash Datatable has a different width in different web browsers while using Dash Bootstraps Components

Here is an image of my application in the Chrome web browser using the cyborg dash bootstraps theme;
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])


As you can see, the datatables are all set next to eachother, edge to edge, as I would like.

The dash bootstraps layout looks like this;


The second row on the bottom contains 2 main columns. One of them contains the datatable with Rear Body [H] and Front Assembly [H] headers, and the other column contains the range slider along with the other 2 datatables. Here is a pastebin of the relevant code where I use bootstraps within my app layout.

However, in other browsers such as Firefox and Microsoft Edge, the columns are no longer set edge to edge and they overlap like so;


The above image is taken still using the cyborg theme, and in the Firefox web browser. Nothing has changed in my code between these two images, and I have no idea why the datatables overlap in one browser but not the other.

I also noticed that this seems to be somewhat theme dependent. Using the default bootstrap theme, the app appears like this in the Chrome browser, and the datatables are overlapping again;

I would like to know how to fix this so that the columns are displayed consistently across all web browsers, and there is no overlap. I have dash v1.13.3, dash-bootstrap-components v0.10.2, and dash-table 4.8.1. I don’t see any reason for this issue to be on my end, so it might possibly be a bug? Thank you for your help.

Hey @xyzasdf

This is probably because both Bootstrap CSS and DashTable use a CSS class called row. Can you try adding the following custom CSS to your app and see if that fixes the problem?

.dash-table-container .row {
  display: block;
  margin: 0;
}

To add this to your app, you can just create a file called assets/custom.css. Any CSS in the assets/ folder is automatically picked up and linked to your app by Dash. More details here. Let me know if that works for you.

1 Like

(Also, really cool app! Would love to see this in https://community.plotly.com/tag/show-and-tell when you finish :slightly_smiling_face:)

1 Like

Unfortunately this did not work. In Firefox and Edge the columns look exactly the same, while in Chrome it now looks like this (which is fine on its own, if I wanted to remove the spacing I could just use no_gutters=True).

This fix solved my issue, many thanks!

Previously, using any Bootstrap theme immediately rendered ineffective the style_data code whereby the text in cells should have been wrapped onto multiple lines. Instead, the table had a scroll bar along its width, thus distorting how the page was displayed.