CODEWITHSUNDEEP
htmlangularjscssz-indexng-grid
pmdarrow
pmdarrow

Reputation: 734

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

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:

ng-grid 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

Upvotes: 8

Views: 3580

Answers (2)

vals
vals

Reputation: 64254

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

Upvotes: 4

HCS-Support
HCS-Support

Reputation: 116

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

Upvotes: 0

Related Questions