Contextmenu Items not reachable if screen smaller than items list

[timonkrebs]

Describe the bug If the screen is smaller than the contextmenu its not possible to click/see all items.

To Reproduce https://stackblitz.com/edit/node-jzyaie?file=src%2Fapp%2Fapp.component.html Steps to reproduce the behavior:

1. Wait until running
2. Click on any node
3. Its not possible see/reach/click item 100

Expected behavior Context menu should be scrollable

[timonkrebs]

PR #20 would fix it.

[sroucheray]

Hi @timonkrebs,

Thanks for submitting this PR. What do you think of giving a little margin at the top and the bottom of the menu when it's to tall ?

// Instead of this
max-height: 100vh;

// giving a bit of space for the menu for it to not stick at the top or bottom of the window 
max-height: calc(100vh - 20px);

Could you give it a try on your use case ?

[timonkrebs]

Hi @sroucheray I do not have any hard feelings on the exact height. I only care about being able to reach all the contextmenu items.

If you think it would be better with less height I can change it in the PR.

Maybe the offset could be done with a css variable, then everyone could define it however they like it.

Thanks for the Input.

[timonkrebs]

I changed the PR like:

--ngx-contextmenu-max-height-offset: 1vh;
max-height: calc(100vh - var(--ngx-contextmenu-max-height-offset));

I think its better to have the offset in vh since it gets smaller if viewed on smaller screens. But everyone can override it with whatever they like.

[sroucheray]

OK, I think the simplest is to have something like

--ngx-contextmenu-max-height: 100vh;
...
max-height: var(--ngx-contextmenu-max-height);

When you commit this changes I'll merge.

[timonkrebs]

@sroucheray did it 👍

[sroucheray]

Fixed by merging https://github.com/PerfectMemory/ngx-contextmenu/pull/20 Thanks @timonkrebs !