Z-index problem with ng-grid column menu

Question

When I put two ng-grids on the same page and open the colum menu for the first, the second grid header overlaps it, as shown in this screenshot:

I tried to set the z-index in the column menu to a very high value, but this did not affect. I tried several other approaches, but I obviously missed something. Any suggestions? The plunker demonstrates the behavior here:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Answer 1

Force the z-index of the first grid panel using this CSS style

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

demo

A better approach (as suggested in the comments) is to use the nth-child approach. expanded to 3 elements:

 .gridStyle:first-child .ngTopPanel { z-index: 3; } .gridStyle:nth-child(2) .ngTopPanel { z-index: 2; } 

demo

Answer 2

Adding z-index:0 to the second div using the ngTopPanel ng-scope classes. (tested in Chrome)