overFlowX is cutting of the first column of my datatable, how can I fix this?

Dash Python
1

don’t know why overflowX is cutting the first column of my datatable:

    return dt.DataTable(data=data_dict, columns=columns, style_as_list_view=True,
                        style_cell={'padding': '5px', 'font_family': 'Segoe UI','font_size': '10px'},
                        style_header={
                            'backgroundColor': 'white',
                            'fontWeight': 'bold'
                        },
                        style_table={'overflowX': 'scroll'},
                        style_cell_conditional=[
                            {
                                'if': {'column_id': c},
                                'textAlign': 'left'
                            } for c in ['Symbol']
                        ]

this is my layout:

    , dbc.Row([
            dbc.Col(children=[html.H4('Quick Facts:', style={'color':'#474747'}), 
                              html.P('General information', style={'color': '#A2A2A2'}), 
                              html.Div(id='table-stats', style={'padding': '10px'})],lg=4, md=11, xs=12)

          , dbc.Col(children=[html.H4('Historical Preformances:', style={'color':'#474747'}),
                              html.P('Return-rates based on rolling time-periods', style={'color':'#A2A2A2'}), 
                              html.Div(id='table-change', style={'padding': '10px'})],lg=6, md=11, xs=12)
              ], justify="center", align="center")
    # , dbc.Row([
    #         dbc.Col(html.Div(id='table-stats', style={'padding': 50,'display':'blocl', 'width':'33%', 'margin-left':'0', 'margin-right':'0'}), width = 6)], justify="center")

    # , dbc.Row([
    #         dbc.Col(html.Div(id='table-change', style={'padding': 50, 'display':'blocl', 'width':'33%', 'margin-left':'0', 'margin-right':'0'}), width = 6)], justify="center")


     , dbc.Row(dbc.Col(children=[html.H4('Advanced Stats:', style={'color':'#474747'}), 
                                html.P('These metrics indicate the intrinsic value of companies, tap on the columns for more info', style={'color': '#A2A2A2'}), 
                                html.Div(id='adv-table-stats',style={'padding': '10px'})],lg=4, md=11, xs=12), justify="center",  align="center")

Does anyone have a fix? I added a picture of the issue below, look at the first columns of each table…

image
image910×715 25.6 KB

2

Hi @andres1

This looks similar to the issue here: DataTable Incorrectly Displayed at Left and Right Edge and Distort after update columns

That solution worked for me!

3

@AnnMarieW, I saw your old thread this morning before your comment on this one, and it saved me! Thank you so much :slight_smile:

1 Like