I am trying to display a table of data with filters at the top to narrow down the displayed data. It functions as intended, but the layout has problems. Three Filter widgets are contained in one row at the top (beneath a header), and a "Table" widget is in another row at the bottom. If I adjust the design so the rows are flush, there is a gap in the live page. If I overlap the table by a bit, the live page shows the widgets flush. (See attached screenshots.) I want the rows to remain flush, even when the window is resized.
If the browser window is not maximized, and I reduce the window height, the "Table" widget renders on top of the Filter widgets so they are not usable, and eventually not visible at all. In the design, the row containing the Filter widgets is arranged so they are brought to the front, and the row containing the "Table" widget is sent to the back. That should make the Filter widgets render on top, and the table less visible, which already has a ton of useless whitespace. That is how they would behave in any other software I have used before.
This behavior happens whichever way I configure the design, so for now, I assume end users will maximize their browsers and overlap the rows in the design. I have tried experimenting with various settings and initially laid out the widgets without rows, all to no avail. Is there some way to make the layout do what I want?
