Incubator-superset: Filter Button [Apply] Position

[SWoto]

I've been working with some data that has big company names and noticed that when someone apply several filters (on the same column) the button apply disappear because it is located on the Chart's bottom.

I change the position to bellow the drop-down button, but it still not good (visually), and would be a lot better to be in the left of the drop-down button. I'm trying to do this, but it'll take some time because i don't know React YET...

Current Modification

I just wrote a css to set a class with

margin-left: auto;
margin-right: 0;
display: block;

and added the class to the Filter Button.

Expected results

I thin it would be really good to have like the image bellow, better to view and without that problem.

Actual results

Now, with the current way, after selecting a set of filters, it can't be applied because the button is hidden.

How to reproduce the bug

1. Go to any dashboard
2. Choose any filter slice and configure it to have the apply button.
3. Select enough filters to hide the apply button

Environment

• superset version: 0.999.0dev
• python version: Python 3.6.9
• node.js version: v10.16.3
• npm version: 6.9.0

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• [x] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [x] I have reproduced the issue with at least the latest released version of superset.
• [x] I have checked the issue tracker for the same issue and I haven't found one similar.

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label #enhancement to this issue, with a confidence of 0.74. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[mistercrunch]

Somewhat related: the overflow on this component is tricky because the dropdowns containers themselves should scroll, but when the dropdown gets opened-up, it should probably overflow over (not scroll)

[rusackas]

@mistercrunch or @SWoto:

When trying to recreate this issue, I don't see the Apply button in the top right like the "expected results" above. I see it below my filter inputs, like so:

Is this correct/expected?

Also, I do see that the input AND the button push out of bounds... I'll look at making that section of the component scrollable when it overflows.

[rusackas]

@mistercrunch Curious as to your thoughts, but I spent some time poking at this thing from various angles. What I don't see is a simple or CSS-based path to fix this.

To have the fly-out menu of options _NOT_ cut off by the scroll area which _DOES_ cut off the select pulldown inputs, we'd have to have two branches of elements on the DOM tree, and keep them positionally synchronized during scrolling/windowResize events. Not really React's strong suit, but possible. It would also mean building the inputs/menus with new components and not involving the react-virtualized-select module (which is not supported anymore anyway), and building something custom, using some other virtualized list library.

Given the time involvement of what it would take to solve this issue while keeping the component working/looking like it does today, I think we should postpone this as we consider a larger design solution around (potentially) a global filters component/system which may ultimately deprecate or replace this.

[mistercrunch]

I also sank some time trying to solve this CSS puzzle without success. Solution might be in the dashboard-native filter on the roadmap.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.