DataTable - border around dropdown

Dash Python
1

I’ve added a dropdown to a DataTable in my Dash app. I don’t know why but it displays with a side and top borders around it:
image

how can I remove this border?

2

Hello @kiteme,

You should be able to do this by altering the css of the dropdown when inside of the datatable.

3

I’ve tried setting css proporty in the DataTable to:

css=[{“selector”: “.Select-control”, “rule”: ‘border: none’}]

and few other e.g. border-width, but nothing helps. Is this the right component?

4

Try it in an external css file.

5

I’ve tried that too - but then it applies to all dropdowns, also outside the DataTable, and causes them to be displayed incorrectly

6

If you only want to apply this to a specific table, you need to do this:

#your-id .Select-control {
    border: none;
}

If you want to apply to all tables:

.dash_table .Select-control {
    border: none;
}
7

It initially didn’t work but I went through the dbc.css and noticed that data_table should be data-table-container instead and now it works

.dash-table-container .Select-control {
border: none !important;
}

thank you for your help!

2 Likes