Grid & column menu display issues

[deeg]

Here is a plunker demonstrating the following issues.

• The grid menu is pretty much unusable if you are showing a grid with a small height. While I don't see too much practical use for it, if you were showing no data or zero rows, the height of the menu is 0.

This is caused by this code which was added as part of this pr to fix issue #4361

I think there needs to be a better solution to #4361 like possibly appending the menu to the body at an absolute position.

• The column menus do not behave like the grid menu.

The logic added as part of the PR above, was only done for the grid menu. This leaves a different behavior between the grid menu and the column menu. This leaves the same issue described in #4361 for the column menu as shown here on this plunker.

I am happy to take a stab at fixing this, but wanted to get some opinions on possible fixes.

[seurimas]

As this is more recent than #4361, I'll reiterate a workaround for those working from ui-grid-stable or who otherwise might need a fix that does not limit usage for small grids: adjust the grids' css such that the top-most grid is A) relative, and B) has a higher z-index than the grid which its menu overlaps with. Basically, the lower grid has a higher stacking context currently, which cannot be properly resolved within the grid itself (as far as I can tell).

[deeg]

Any opinions of maintainers?

@c0bra, @timothyswt, @PaulL1

As an aside, it seems like many issues are not vetted for this library. Please let me know if you need any help with bugs/features/vetting of bugs.

[michaelwnelson]

Maybe a built-in (optional) handler could be implemented? Since we know z-index is an issue with multiple grids, maybe a modal pop-up of the respective menus (grid, column, etc)? This suggestion might be considered a feature others would use irrespective of solving this multi-grid overlap issue.

[zheng-wang]

Grid menu height is too small when the grid height is small. This looks irrelevant to z-index. Not sure how to resolve the issue. +1 to show interest in a solution.

[rochejul]

Hi

Maybe the menu could be append to body? Like the https://angular-ui.github.io/bootstrap/#!#dropdown with the option dropdown-append-to-body

Have you got a way to intercept the menu opening / closing ? To try to do this as a "hack" ?

Many thanks for your feedback

Regards

[gunsha]

I've overriden the max-height of the menu .ui-grid-menu-mid{ max-height: 500px !important; } and now I can see the full menu with only one row with 40px height

[prx-lmo]

If you don't have a grid constellation like the guy in #4361 you can simply use .ui-grid-menu-mid{ max-height: none !important; }