z-index issue with ng-grid's column menu

Question

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

I've tried setting the z-index on the column menu to a very high value but it had no effect. I've tried several other approaches but I'm clearly missing something. Any suggestions? Plunker demonstrating the behaviour here:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Gentilis

Does your menu have a position: relative or position: absolute property? – Saintebeuve

@doitmyway - the source for ng-grid is on github. Here's a link to the column menu template (shown above): github.com/angular-ui/ng-grid/blob/master/src/templates/… – Middlebreaker

See here for developer comments from the issue post on the official forum: github.com/angular-ui/ng-grid/issues/1035 – Valladolid

Answer 1

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

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

demo

A better approach (as suggested in comments) is to use a nth-child approach. extended to 3 items:

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

demo

Toxicology

Is there a more general solution for if there are more than 2 grids stacked up below each other? (Example: plnkr.co/edit/cD27SSMpXs3Q0genXzDk?p=preview) – Middlebreaker

In theory, all grids can use the same grid options too, so a proper solution will probably either have to apply a unique id to each grid element, or somehow make use of the CSS' ability to identify the number of a child. (Upvoted btw. I'm asking because I work with pmdarrow.) – Middlebreaker

Answer 2

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

Portal

Thank's but I need something that applies works with more than just 2 grids stacked on eachother. – Gentilis

Plus setting the z-index to 0 will probably have other unintended side effects when using various ng-grid features that display overlaying controls. – Middlebreaker

You got a point there. I was just looking at this particular case, so yeah, better use the other solution. – Portal