[ANGULAR] - Auto adjust custom context menu

[rayudu.pasumarthy]

Hi,

We utilize a custom context menu to enable users to click on the space below Gantt tasks and add new tasks. But when they click on the final row, the menu doesn't adjust to show all the items. Is there a way to adjust the position like how it does for the default context menu?

Steps to replicate:

1. Go to advanced forum ( https://bryntum.com/products/gantt/examples/advanced/ )

2. In code editor, Add Menu in the bryntum gantt import statement and add the following code at the very end:

gantt.subGrids.normal.element.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    const menu = new Menu({
        x: event.x,
        y: event.y,
        items:  {
            "addOptions": {
                "text": "Add Task",
            },
            "addTwoOptions": {
                "text": "Add Two Task",
            }
        }
    });
});

1. Search for 'Configure'

2. On the gantt side, right click at the lowest part of the schedule, the custom menu appears in the following way:

   

   gantt_custom_menu.png (71.63 KiB) Viewed 347 times

Can the context menu adjust if it know there is no space to show all the items like in the default context menu?

Thanks,
Rayudu

[tasnim]

Thank you for your report. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/6916

All The Best,
Tasnim

[mats]

Try setting constrainTo : document.body on your menu?

https://bryntum.com/products/schedulerpro/docs/api/Core/widget/Widget#config-constrainTo

[Animal]

Using an actual x and y position as a programmer implies that you are in command and the widget must obey. Otherwise, that might cause problems for people who need to control widget position exactly.

If you align the widget using showBy({ event }), the aligning code path does a lot of adjustment to try to fit.

It will check whether it fits in the available space and realign and/or shrink itself (Down to configurable minima) to fit in the space:

Screenshot 2023-06-08 at 07.58.18.png (497.5 KiB) Viewed 262 times

See this example to see how the aligning method of positioning a widget allows great flexibility:

https://bryntum.com/products/grid/examples/tooltip/