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.