Dash (Graph and DataTable) and Bootstrap do not interact well

[audetto]

dash                      1.10.0    
dash-auth                 1.3.2     
dash-bootstrap-components 0.9.2     
dash-core-components      1.9.0     
dash-html-components      1.0.3     
dash-renderer             1.3.0     
dash-table                4.6.2     

- OS: Ubuntu 19:10
- Browser: Firefox 75 - Chrome 81

Describe the bug

Interaction between dash Graph and DataTable with Dash Bootstrap Components is poor.

In the attached example there are 4 tabs with 2 Graphs and 2 Data Tables

1) graph: ok 2) graph: wrong height with dbc. graph is flat (this happens whenever the Graph is not visible initially) 3) graph: in dbc there is an annoying horizontal scroll bar for a few pixels 4) graph: in dcc and dbc it only uses part of the vertical screen and in dbc there are no scrollbars

I have seen more pathological behaviour (see https://github.com/plotly/dash/issues/1168) but was not able to reproduce it yet in a small app.

Expected behavior

DBC should integrate well in DCC and the other way round. Where should this bug be filed?

Screenshots

Example source code. scratch.txt

[tcbegley]

Hey @audetto,

2. is a result of graphs not resizing when display:none is toggled on the parent element as has been observered here. You can work around this by dynamically rendering the tab content as in this example

3. and 4. I believe are both related to the fact that dash-table and Bootstrap both make use of a CSS class called row and thus clash with each other. You can fix it by overriding the row class inside the table with a bit of custom CSS. Something like

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

[xumiao]

I am observing issues of plotly graph like being shifted dramatically to right and bottom leaving the top and left blank when wrapped inside a dbc col. Not sure whether these are related.

[tcbegley]

Hey @xumiao, can you share some example code or a screenshot?

[alejandrovalde]

Hey @tcbegley, I have a case where a dash data table is placed inside a dbc col (bootstrap), but the width of the columns does not seem to be determined automatically in order to accomodate the content of the cells.

Is there a custom CSS that could fix that?

[tcbegley]

Hey @alejandrovalde

The Col component will just resize to fit the table, it won't affect the size of the columns within the table. You'll have to use DataTable's styling options to do that sort of thing.

[audetto]

Hey @audetto,

1. is a result of graphs not resizing when `display:none` is toggled on the parent element as has been observered [here](https://community.plotly.com/t/how-to-force-dcc-graph-to-resize/14852). You can work around this by dynamically rendering the tab content as in [this example](https://dash-bootstrap-components.opensource.faculty.ai/examples/graphs-in-tabs/)

2. and 4. I believe are both related to the fact that dash-table and Bootstrap both make use of a CSS class called `row` and thus clash with each other. You can fix it by overriding the row class inside the table with a bit of custom CSS. Something like

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

These are good to know, but is there any plan or possibility to fix this so that it works out of the box? If there is a clash, can one of the 2 libraries use a different name?

[tcbegley]

If there is a clash, can one of the 2 libraries use a different name?

It's very unlikely Bootstrap would use a different name, as their stylesheets are very extensively used and .row is one of the key building blocks. In any case, dash-bootstrap-components has no connection with the Bootstrap developers, we just make a Dash interface for their components.

dash-table I don't believe actually uses the .row class for styling, but nevertheless risks breaking existing apps that rely on that class being applied if they changed it now.

but is there any plan or possibility to fix this so that it works out of the box?

I've been working on some extensions to Bootstrap CSS for use with Plotly Dash, and would like to add some dash-table support to it. I haven't had time yet though.

[Sinba7]

Hey @audetto,

1. is a result of graphs not resizing when display:none is toggled on the parent element as has been observered here. You can work around this by dynamically rendering the tab content as in this example
2. and 4. I believe are both related to the fact that dash-table and Bootstrap both make use of a CSS class called row and thus clash with each other. You can fix it by overriding the row class inside the table with a bit of custom CSS. Something like

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

Hey, can you explain a little more how to override the row class inside the table? Thanks!

[audetto]

Hi

things have improved since I initially opened this issue. Now the flat graphs have disappeared.

dash                      1.18.1    
dash-bootstrap-components 0.11.1     
dash-core-components      1.14.1     
dash-html-components      1.1.1     
dash-renderer             1.8.3     
dash-table                4.11.1    

But the usage of vertical space is not great. The graph uses the correct horizontal space, but it could do a much better job vertically.

The code is the same as posted at the top of this issue.