[FIXED] How to move "apply filters" button up to directly below the filters on a Superset dashboard embedded via iframe?

Issue

I have a tall dashboard (multiple screens' worth, with a scrollbar) in Apache Superset 2.0.0. I have a native filter pane on the left side with the filters up top and then the "APPLY FILTERS" and "CLEAR ALL" buttons at the bottom on the screen. When viewed directly in Superset, it looks great: those buttons stay in place as I scroll.

However, when I embed this dashboard via an iframe, the filter action buttons appear all the way at the bottom of my tall dashboard. In my case there's a full screen of whitespace between the filter inputs and the buttons so you can't see them both at once. It's confusing for the user.

How can I force the buttons to be anchored directly below the last filter?

Solution

Edit Dashboard -> Edit CSS and add this:

.open > div:nth-child(3) {
  
  position: absolute;
  top: 300px;
}

Adjust the 300px as needed to hard-code it further up or down. If you have multiple-choice filter(s), select all options when calibrating your pixel value to ensure that you've provided sufficient space.

The filter buttons are the direct 3rd child of an open class div, the > makes it direct-only so that a third filter (if you have one) is not also moved to this position.

Answered By - Sam Firke

Answer Checked By - Mary Flores (PHPFixing Volunteer)