p-contextMenu: Submenu goes out of screen at the bottom of the view

bence-balogh-intland commented 1 year ago

Describe the bug

Submenus are not fully visible, when the Context menu is positioned near to the bottom, or there are many submenu items, those overhang the bottom of the screen.

I was able to reproduce it in between the versions of v13 and v15.

Please find the behavior on the screenshoot:

Please notice that:

The submenu of "Open me" goes off the screen
Scrollbar appears on the right

Environment

Stackblitz

Reproducer

https://stackblitz.com/edit/github-dnrd8e

Angular version

13-15

PrimeNG version

13-15

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.18.0

Browser(s)

Chrome 109

Steps to reproduce the behavior

Open Stackblitz link
Right click on blue context menu target element
Hover over "Open me"
Observe the behavior

Expected behavior

When submenu's bottom overhangs the bottom of the screen, it should:

A) Align submenu's bottom to page bottom

or

B) Align submenu's bottom to the bottom of the parent menu item ("Open me" - in the example)

oleggd commented 1 year ago

Hi, faced the same issue and found that in contextmenu.ts -> positionSubmenu(sublist) available space calculation is not taking into account all previous height of parents

Item1
Item2
Item3
- SubItem31
- SubItem32

calculations: if (parseInt(containerOffset.top) + itemOuterHeight + sublistHeight > viewport.height - DomHandler.calculateScrollbarHeight()) { sublist.style.removeProperty('top'); sublist.style.bottom = '0px'; } else { sublist.style.removeProperty('bottom'); sublist.style.top = '0px'; }

containerOffset.top - top of whole menu under of item1 itemOuterHeight - height of item3 sublistHeight - height of submenu item3

So, height of item1 + item2 is not taking into account. Maybe containerOffset.top should be top of parent item - item3. Hope i understood calculation correctly and this can help you.

Thanks

stity commented 10 months ago

primefaces / primeng