DataTable with Bootstrap styling issues with dropdowns

[Susan]

I am using DataTable and Bootstrap (dash_bootstrap_components with SANDSTONE theme), and I am having some css issues with the display of dropdowns in the DataTable.

Originally, the dropdown menu would not appear when the cell was clicked, but I was able to fix this issue by adding a css parameter to the DataTable (css=[{“selector”: “.Select-menu-outer”, “rule”: “display: block !important”}]) as described here: [RESOLVED] Dropdown options in Datatable not showing? - #6 by vivekvs1

The other issue I am having is that the drop-down arrow is overlapping the content of my cell:

Notice how the arrow appears over top of the “false”. I am not a css expert, and cannot figure out how to fix this problem. Is there a way to solve this? Or a way to avoid conflicts with bootstrap styling altogether?

Thanks,
Susan

[AnnMarieW]

Hi @Susan and welcome to the Dash community

Could you please try upgrading to the most recent version of Dash (2.1.0) I think this was fixed recently.

If that doesn’t fix the issue, could you please provide a minimal reproducible example, because I can’t duplicate it on my end.

[Susan]

I have installed dash 2.10 and dash-bootstrap-components 1.0.2. Both problems still exist (dropdown doesn’t appear, and the arrow overlaps the cell contents).

import dash_bootstrap_components as dbc
from dash import Dash, dash_table, html

app = Dash(
    __name__,
    external_stylesheets=[
        dbc.themes.SANDSTONE,  # Bootstrap theme
    ],
)

app.layout = html.Div(
    dash_table.DataTable(
        id="test",
        data=[
            {"greeting": "hello", "bool_value": True},
            {"greeting": "world", "bool_value": False},
        ],
        columns=[
            {"name": "greeting", "id": "greeting"},
            {"name": "bool_value", "id": "bool_value", "editable": True, "presentation": "dropdown"},
        ],
        dropdown={
            "bool_value": {
                "options": [{"label": "false", "value": False}, {"label": "true", "value": True}],
                "clearable": False,
            }
        }
    )
)

app.run_server(host="0.0.0.0", port=8000)

Thanks!

[AnnMarieW]

Hi Susan,

Thanks - that was helpful. And yes, you are correct, it looks like the updates did not make it into dash v2.1.0

The issue of the dropdown arrow overlapping the text happens even without a Bootstrap styesheet, so it’s a problem with the table.

When I tried it yesterday, it looked like it was fixed, but my version didn’t have "clearable": False

This is a good example to use and open an issue on Github:

1. Dropdowns don’t drop down when there is a Bootstrap stylesheet - can be fixed by adding

.dash-table-container .dropdown {
  position: static;
}

2. dropdown arrow overlaps text when dropdown includes "clearable": False
   can be fixed by adding:

.dash-spreadsheet .Select-value-label {
  padding-right: 20px;
}

[Susan]

Thanks ! I have created a new issue for the overlap: https://github.com/plotly/dash/issues/1913 The dropdown not appearing issue can be tracked here: https://github.com/plotly/dash/issues/1814

[Trydash2021]

Hi there,

Thanks for the solution. Question: when using

style_table={'overflowX': 'auto'}

I have a problem at the last rows of the table, because the drop down is not visible below the bottom of the table. Any idea how to fix this? It work perfectly when overflow X is not active.

Many thanks!