DataTable column with dropdown presentation: Dropdown list is cut off when using horizontally scrollable table

Dash Python
1

I have defined the column like {"name": "Formula", "id": "Formula", 'presentation': 'dropdown', 'editable': True} so I am using a dropdown list for the cells of this column.

The Problem is that the table can be very wide so I need to enable the user to scroll it with style_table={'overflowX': 'auto'}. But now, when I open the dropdown to select a value inside of the table, the dropdown list is cut off and the user has to scroll down to select values which have a low position in the list. Is there a way to make the dropdown list always show?

Screenshot 2021-05-03 162752

1 Like
2

This worked for me:

dash_table.DataTable(
        ...
        ...
        style_table={
            'overflowX': 'auto',
            'height': '400px', #set a height large enough that your dropdown displays without needing to overflowY even in the last row
        },
        css=[
            {
                'selector': '.ui-select-choices',
                'rule': 'position: fixed; top: auto; left: auto; width: inherit',
            }
        ]
)