✊🏿 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!

Active cell is right aligned instead left like the table itself

Hi everyone, my table aligns the active cell to the right. Where I can set this option to left?

here is my init table definition:

dash_table.DataTable(
                        id='questions_table',
                        editable=True,
                        row_deletable=True,
                        style_cell={'textAlign': 'left'},
                        style_data={'border': '1px solid white',
                                    'backgroundColor': 'rgb(30, 30, 30)',
                                    'color': 'white', 'textAlign': 'left'},
                        style_header={'border': '1px solid white',
                                      'backgroundColor': 'rgb(30, 30, 30)',
                                      'color': 'white'},
                    ),

I had to solve this using css:

input.input-active.focused.dash-cell-value{
    text-align: inherit !important;
}

input.input-active.unfocused.dash-cell-value{
    text-align: inherit !important;
}

Curious to see, if there is a better solution without css but this should help you cure the symptom. Generally, checking developer tools of the browser you are using (e.g. by selecting “Inspect element”) goes a long way for debugging/improving the css.

1 Like

It’s working, I just need to put the css file in the assets folder and it was load automagically:
https://dash.plotly.com/external-resources