Redash: Multi-Filters: "select all" makes table view unscrollable

Created on 2 Apr 2020  路  3Comments  路  Source: getredash/redash

Issue Summary

At 720p screen resolution, the multi-select filter widget makes the table unscrollable if too many values are selected.

image

I don't think it depends on the screen resolution. But whether the <select> widget expands to the bottom of the view port. If it does, scrolling breaks.

Steps to Reproduce

I added an example on redash-preview.

  1. Click "select all" in the multi-filter
  2. Use responsive mode in your browser to simulate 1280x720 resolution
  3. Try scrolling down to see the table

Secondary Bug

The Select All prompt is stuck in checked state, even after clicking clear.

image

Technical details:

  • Redash Version: v9 Alpha
  • Browser/OS: FF
  • How did you install Redash: Redash-Preview
Bug Frontend

Most helpful comment

Initially I was thinking about 2 things:

  • Introduce max-height: 30% into the Filter when query has a Fixed layout, it will add a second scroll bar, but filters are not supposed to take that much of the visualization area anyway;
  • Add a new check for the height to make sure too small height resolutions won't display the fixed layout (currently we check only the width).

Antd has a maxTagCount prop for Select, that if works with the regular multi-options I'll add it too.

Edit:
It does :slightly_smiling_face:
image

All 3 comments

Simple solution I see: add a min-height to the table. Caveat: it will create two scroll areas.

More robust one: Since we use JS to define whether the page has fixed layout, try to check if there's enough room for the table in a fixed layout before defining it with a fixed layout. It's mostly an idea, it can be that we can't go any further than checking the page height as well.

Can we change the filter to show "option, option 2 + X others" like we do for parameters now to reduce the chances of this happening?

Initially I was thinking about 2 things:

  • Introduce max-height: 30% into the Filter when query has a Fixed layout, it will add a second scroll bar, but filters are not supposed to take that much of the visualization area anyway;
  • Add a new check for the height to make sure too small height resolutions won't display the fixed layout (currently we check only the width).

Antd has a maxTagCount prop for Select, that if works with the regular multi-options I'll add it too.

Edit:
It does :slightly_smiling_face:
image

Was this page helpful?
0 / 5 - 0 ratings