Plotly Dash: Dropdown not visible in DataTable due to scroll

user_15297178 0
Viewed 481

In the last couple of rows of a datatable the dropdowns are not visible. They are always being cut off. Is there a way to have the dropdown pop above the datatable itself so it’s always visible? I have provided an example below. Could this be done through override CSS? I am using a bootstrap theme with the Dash app and I think this is causing the problem, because once I remove the bootstrap theme it works with the pop out visual.

enter image description here

dropdown bootstrap-4 plotly-dash datatable
1 Answers

I've this problem before as well and the answer is no. For a scrollable Datatable, there is no way to use CSS to uncut the dropdown.

I suggested below methods that I've tried and worked:

  1. Change the Datatable to disable scrolling (if number of columns can fit to your screen only).
  2. Add CSS 'min-height' to the table, this will make the horizontal scrollbar move lower to leave a space between the scrollbar and the last row of your table, so that it would leave a space for you to view the dropdown (better to limit your dropdown size as well). You could also try to recalculate the min-height pixel each time the table draws so the scrollbar won't look too awkward.
  3. Recalculate the height of the table each time you open the dropdown.

Those are the methods I've come up with.

user_89700670
Related