Domanda

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

È stato utile?

Soluzione

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

Altri suggerimenti

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top