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.

2 Likes

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