✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

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

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…

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!

@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