Column Menu Popup is not fitting into the viewport/grid, how can I work around this?
When using a small viewport/grid, or have a very large popup, you may have run into issues with the display being clipped, or the grid producing scrollbars.
To work around these problems, the grid has a property 'popupParent'.
https://www.ag-grid.com/javascript-grid-context-menu/#popup-parent
You have a few options you can use here.
1 - Scrollable Column Menu
If you leave popupParent unset, the default behaviour will allow the column menu to be scrolled through, so even with a small viewport or grid you can still access all of the menu items.
https://plnkr.co/edit/1iJeSZrNnv7dPVYfa7yF?p=preview
2 - Use popupParent to fit Column Menu outside a small grid
You can set popupParent to a DOM element, such as 'body' on this example. It will result in the Column Menu overlapping the small grid, and showing in full size. If you have a small viewport, ie: browser window with a small height, the popupParent should become a scrollable element, so you can scroll on that element to reveal the extended height in which the Column Menu is shown.
https://plnkr.co/edit/xSgJE2YTtsZoW2epbDOI?p=preview
To test popupParent scrolling on the above plunker, resize the browser height to hide the bottom of the Column Menu. Then you will find the body element becomes scrollable to reveal it.
3 - Stop the popupParent being scrollable, even when the viewport is small
If you want to avoid the scrolling on a popupParent, you can simply modify the CSS with
overflow: hidden;
Now even if the viewport is small, you can prevent the scrolling and just leave it to be clipped.
https://plnkr.co/edit/xHnZ3CXSfLOvGjRZABiX?p=preview
To test on the above plunker, resize the browser height to hide the bottom of the Column Menu. Then you will find the body element, unlike the previous example, will leave it clipped rather than scrolling to reveal it.
Comments
0 comments
Please sign in to leave a comment.