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; }

[ghost]

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.