Table width breaks layout when loading an local css file

[ptim]

Love your work!

I'm using a workaround to load a local stylesheet from here:
https://community.plot.ly/t/how-do-i-use-dash-to-add-local-css/4914/9

I find that:

• datatable loads inside .container, sets its own width to page width
• stylesheet loads, sets the .container width to 960px
• datatable overflows .container (see screenshot)
• resizing the window updates the datatable width, correcting the issue

Funnily enough - it doesn't seem to occur when using your codepen URL:
https://codepen.io/chriddyp/pen/bWLwgP.css

Wasn't sure of the best place to report this - figured that it was likely a datatable issue, but maybe it relates to / is solved by allow optional header and footer #171

For the moment, I'm just adding overflow-x: scroll to the container, but I'd thought you'd like to know...

Cheers, ptim

[janimo]

Confirmed with 0.6.0. Inline styles work whereas a css loaded via html.Link doesn't; both are setting the same css grid properties.

[Nyahua]

Same question for me.
my code:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd

app = dash.Dash(__name__, static_folder='assets')

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

df = pd.DataFrame({
 'x': ['A', 'B', 'C', 'D', 'E', 'F'],
 'y': [4, 3, 1, 2, 3, 6],
 'z': ['a', 'b', 'c', 'a', 'b', 'c']
})

app.layout = html.Div([
 html.H4('DataTable'),
 dt.DataTable(
 # Initialise the rows
 rows=df.to_dict('records'),
 columns = list(df.columns),
 row_selectable=True,
 filterable=False,
 sortable=True,
 selected_row_indices=[],
 id='dt-gps'
 ),
 html.Link(href='/assets/bWLwgP.css', rel='stylesheet'),
], className='container')

if __name__ == '__main__':
 app.run_server()

[Nyahua]

@ptim where do you add the overflow-x: scroll?
I added it to my local css file, but it seems not work:

.container {
 position: relative;
 width: 100%;
 max-width: 960px;
 margin: 0 auto;
 padding: 0 20px;
 overflow-x: scroll;
 box-sizing: border-box; }

html.Div(id='system_info_container1', style={'max-width': '600px', 'overflow-x': 'scroll'},
 children=[
 generate_table(global_example_csv_dataframe_system_info, max_rows=1)
], className='four columns'),

Here's how I made it work. Just override the css-styling in your python code using the style variable.