Filter buttons being displayed at the very bottom of an embedded dashboard

[davigiroux]

Screenshot

Description

When embedding long dashboards, the "Apply filters" button is displayed at the very bottom of the page. We have to set the height of the iframe in a way that it doesn't create an internal scroll in our app, and since the buttons are configured with 100vh, the user has to scroll all the way to the bottom to apply any filters. Could you have a way for us to have the button directly below the last filter?

design=suggest

[msyavuz]

Can you provide a bit more context on this? button text should not be uppercase so either an old version of superset or modified

[rusackas]

You could use horizontal filters as a workaround. We're open to a proposal/PR that adds config (whether to the filter bar options in Superset, or as part of the Embedded SDK) to (a) move the filter application buttons to the top or (b) make the filter bar a short as it needs to be.

[rusackas]

I think we'll move this to an Ideas discussion, since this is a very interesting design proposal, but we're not considering it a "bug" for now since the feature works according to the original design intent.

[davigiroux]

Sorry I couldn't add more screenshots since this is an enterprise use of the dashboards so I couldn't post the full thing. When you're viewing it in the normal superset page, we don't have this problem since the buttons are fixed in 100vh of that page, so regardless of the size of the dashboard itself, we never have to scroll to just apply the selected filters. When we embed it in our app, we calculate the height of the iframe based on the height provided in the in the callback from the embed function. With that, the calculated viewport height for 100vh becomes the very bottom of the dasboard instead of the actual viewport of the user. Not sure if it's what design intended, but it would be nice to have an option to avoid having to scroll all the way to the bottom of the page to click the button.

As for the horizontal filter, I can see that helping a lot! How can I configure it?

[davigiroux]

I was able to achieve what I needed with custom CSS on each Dashboard. Thank you!

This was what I used:

.open > div:nth-child(3) {
  position: relative;
}

.open > div:nth-child(2) {
  height: auto;
  min-height: 800px;
}