Layout advice for many multi-select options

I have a multi-select box here that is, unfortunately,

  • redundant with the plotly graph
  • necessary as it’s an input to the options properties in the “compare polls by demographic:” filter
  • necessarily the default setting on the initial update

As you can see, it leads to some dead space under that graph at some window sizes.

There is also another chart below that I would like to keep visible on-screen with this at the same time, but that’s not really possible under the current configuration. I can’t make the font size of those countries that much smaller.

Is it possible to truncate the multi-select box? Or add a scrolling component?

Or is this a problem of placement?

I feel as though this doesn’t need a MWE as it’s more of a strategic issue than a technical issue.

Let me know if you have any advice, or any examples of someone who has handled this issue well!

Hey @fedderw

This would be a great use-case for the new Offcanvas component in the latest release of dash-bootstrap-components. The multi dropdown could be in the Offcanvas and then use a button to show or hide the content.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/

1 Like