✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Embedded Dropdowns of Pivot Table display issue

I have built a simple dashboard which combines a few dropdowns (to select inputs) and a PivotTable (which displays the unique data which is generated from those dropdowns). All works well but from a display point of view the dropdowns above the table are being obscured by the dropdowns within the pivottable…

Here is a snapshot of my pivottable fully loaded and looking nice below the dropdowns:

But here is the problem - once I have a table loaded and I want to change the input (via the dropdowns) I get the following messy interaction:

I have tried to mess around with the style/zIndex of the elements (as in, dropping the pivottable ‘behind’ the dropdowns/pushing the dropdowns ahead of the pivottable, with something crazy like zIndex = 100000) but nothing seems to work.

For clarity, the three dropdowns above the table are in a separate div, the pivottable below is also in a separate div.

Thanks in advance for any ideas.