Forums Home / Wijmo / General Discussion
Posted by: davidmartin-bennett on 22 June 2023, 10:05 pm EST
davidmartin-bennett
Posted 22 June 2023, 10:05 pm EST - Updated 22 June 2023, 10:10 pm EST
Hi
I was wondering if there is a way to set the position of the sub menu that is generated by the menu entries with a subItemsPath set.
We have an issue where the sub menu falling off the bottom of the screen when it is displayed:
vivek.pannu
Posted 25 June 2023, 5:34 pm EST
Hi David,
Sorry, but we are unable to replicate the issue on our end. However, you can refer to the below sample to customize the position of the sub-menu list box. You’ll have to handle the ‘formatItem’ event of the Menu to set your desired position for the sub-menu.
Sample link - https://jscodemine.grapecity.com/share/TAT2z0IPck60yP_abeMUrA
In the above sample, I have aligned the top position of all the sub-menus in the Edit menu and set the position of the ‘Save As’ sub-menu in the File menu to align with the top of the previous menu.
In case, you face any issues please let us know. Also, please try to update the above sample to replicate the issue in that case and share it with us so that we can investigate the issue and assist you accordingly.
Regards
davidmartin-bennett
Posted 29 June 2023, 12:54 am EST - Updated 29 June 2023, 1:01 am EST
Hi
Sorry I just re-read my original post and it wasn’t very clear. Here are some additional details:
We are using Angular 14 as the language and the submenus that are falling off the bottom of the screen are from sub-menus of context menus on a flexgrid.
We have it set up as follows:
the user right clicks the grid → this triggers the (contextmenu) event which we catch and depending on where they clicked either header or cell generate one of two menus.
if the user right clicks on the lower rows of the grid the initial context menu renders without issue (i.e set the menus position so the bottom left corner of the menu is positioned where the mouse cursor is):
However if you then hover/click the bottom print option:
the menu sub-menu appears aligned top left to the parent menu option causing the sub-menu to drop below the bottom of the screen threshold (as a by product creating a a vertical scroll bar in the browser)
vivek.pannu
Posted 29 June 2023, 11:05 pm EST - Updated 29 June 2023, 11:10 pm EST
Hi David,
Sorry, but we are still unable to replicate the issue on our end, could you please share a small sample in which we can replicate the issue so that we can find the root cause of this issue and assist you accordingly? Also, please share the browser information in which you are facing this issue.
Here’s the sample in which we tried to replicate the issue - https://stackblitz.com/edit/angular-6bzwqt?file=src%2Fapp%2Fapp.component.ts
You can also update the above sample to replicate the issue and share it with us.
In case, if there is something we missed please let us know.
Regards
davidmartin-bennett
Posted 30 June 2023, 12:59 am EST - Updated 30 June 2023, 1:04 am EST
Hi
Thanks for the swift reply
I have updated the sample to better reflect our project and replicate the issue:
https://stackblitz.com/edit/angular-ixjr3h?file=src%2Fapp%2Fapp.component.html
You should now be able to right click on the bottom rows and have the print menu overflow the bottom of the screen:
vivek.pannu
Posted 2 July 2023, 11:34 pm EST
Hi David,
Thank you for sharing the sample, we are able to replicate the issue on our end in the shared sample. We are working on this issue, and it will take some time. We will update you at the earliest.
Regards
vivek.pannu
Posted 3 July 2023, 6:07 pm EST
Hi David,
It seems that the large number of list items on the menu is causing this issue. To avoid this issue you’ll have to manually update the dropdown position by handling the ‘formatItem’ event of the Menu control.
Please refer to the following updated sample for the same - https://stackblitz.com/edit/angular-jijo8m?file=src%2Fapp%2Fapp.component.ts
In case, you face any issues please let us know.
Regards
davidmartin-bennett
Posted 4 July 2023, 3:01 am EST
Hi
This looks like the perfect solution, I’ll try it out in our systems and let you know how I get on, thank you
davidmartin-bennett
Posted 4 July 2023, 8:59 pm EST
Hi
Got it in the system and working, it has also been signed off by our testers
Thank you very much for your help
