z-index issue with grid menu overlapping other grids on the page.

[alex87]

When I place multiple grids on the same page in close proximity to each other then the grid menu can overlap the grid below it and get obscured.

Plunker is here: http://plnkr.co/edit/CcGhO5

I found this old issue from ng-grid 2 (#1035), which is a similar issue, and tried variations of the z-index suggestions to fix the issue but none of them helped.

Does anyone have any suggestions for workarounds to this?

[JLLeitschuh]

I've seen this same problem. I never opened an issue though.
If you have a solution feel free to send us a PR.

[bartkiewicz]

We had a similar problem, and the fix I used appends the menu to the body when showing and puts it back into it's parent when hiding. The basic bulk is this

if (parent.nodeType === 1){
    var parentPos = parent.getBoundingClientRect();
    angular.element($document.context.body).append($elm);
    var width = $document.context.body.clientWidth;
    angular.element($elm).css({
        "position":"absolute",
        "top": parentPos.top + "px",
        "right": parseInt(width - parentPos.right) + "px"
    });
    angular.element($elm).addClass("ui-grid");
} 

The changes here function, f5d4f5a , but they rely on using the viewport to get the position the menu should be. This works fine for us since our app doesn't scroll the page, but I imagine that wouldn't work for everyone's situation.

[ingshtrom]

@JLLeitschuh @c0bra I'm looking into fixing this (actually it's fixed in my branch, but I need to determine if it is the "right" fix).

Firstly, instead of using CSS, I'm am just restricting the grid menu to never be larger than or expand past the grid's outer bounds.

Secondly, in order to accomplish this, I am changing ui-grid-menu to have a requirement on ui-grid instead of having ui-grid-menu optionally require ui-grid. This would be a break that could hurt people that are trying to use the grid menu outside of the ui-grid directive.

TL;DR: Am I fine to make a breaking change to ui-grid-menu so that it now has require:'^uiGrid' instead of require:'?^uiGrid' OR should I conditionally fix this issue based on if we are within an ui-grid directive?

Thanks,

[ingshtrom]

Update:

I have a fix that I'm going to create a PR for this morning. I currently have it working to update the grid menu when we load the grid. We'll see how it goes!

[ingshtrom]

@alex87 can you verify that this fixes your issue?

[alex87]

Hi @ingshtrom , I created another plunker with a build from master, and the problem seems to be fixed now, the menu now has a scroll bar within the grid. So you can access all of the menu items which is the important thing!

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

Thanks!

[ingshtrom]

@alex87 Glad to hear it! We'll just need to wait for v3.0.8 to be deployed and we can have our fix. In the meantime, I think you are the only one with the power to close this ticket...

[deeg]

This fix is not ideal in my opinion.

If you only have a few rows in the table (or none) the menu becomes unusable. It will either be very small or have a height of 0 in the case of no data.

Another thing is this menu now behaves differently from the column menus which do not have the same logic by default.

I might open another issue as an enhancement and try to get out a PR if other people feel the same way.