Table width breaks layout when loading an local css file #45

Activity

1. janimo commented on Feb 22, 2018

   

   janimo

   on Feb 22, 2018

   More actions

   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.
2. Nyahua commented on Apr 14, 2018

   

   Nyahua

   on Apr 14, 2018

   More actions

   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()
3. Nyahua commented on Apr 14, 2018

   

   Nyahua

   on Apr 14, 2018

   Last edited by Nyahua

   More actions

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