z-index issue with column menu

[pmdarrow]

When I put two grids on the same page and open the column menu for the first one, the second grid's header overlaps it as seen in this screenshot:

Here's a Plunker demonstrating the issue: http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Forcing the z-index of the first grid panel with this CSS style provides a workaround:

[ng-grid=gridOptions1] .ngTopPanel {
    z-index: 2;
}

Unfortunately this doesn't scale well since it has to be applied to each individual grid that is stacked. I think this should be fixed in ng-grid properly.

[c0bra]

.ngTopPanel {
    z-index: 9999;
}

?

[Alex--wu]

I got the same problem.
For now I just use z-index: auto.

[alainbryden]

z-index: 9999 changes nothing. Even z-index: auto is insufficient - the glyph for other table drop-downs will still appear above the menu of higher up tables:

And you run into issues if tables that get rendered first end up positioned below tables rendered later.

The only reliable solution so far is to painfully increment the z-index of each grids ngTopPanel in the reverse-order you expect them to appear on the final page:

http://plnkr.co/edit/HBKR6gBCeoW2g2U6kVb1?p=preview

[pmdarrow]

@roblarsen was this fixed?

[roblarsen]

It was not. We released 2.0.9 and from here on in are moving fully into development of 3.0.

[davidbarkhuizen]

See this related StackOverflow thread http://stackoverflow.com/questions/22308801/z-index-issue-with-ng-grids-column-menu