Context menu does not load if its bigger than the screen

Hello,

I have an issue with the context menu not loading if the height of the menu is bigger than the distance between the "left click" point and the bottom of the screen.

Any idea why this could be happening?

thanks

3 Replies 1 reply marked as answer

TS Thiyagu Subramani Syncfusion Team February 25, 2021 12:58 AM UTC

Hi John, 

Based on your shared information we unclear about your exact requirement, So before proceeding this please share below detail then only we provide the appropriate solution as soon as possible. Here we have prepared sample using context menu for reference. please refer it. 


  1. Share your exact requirement briefly with video/image demonstration
  2. If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.
  3. Syncfusion package version used.
  4. Are you rendering custom context menu items in your application

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 



JK John Killcommons April 27, 2021 02:04 PM UTC

Hi Thiyagu,

At a given moment, we could have 30+ items in the context menu, those are custom menu items generated in a custom Component.

It renders, but when i try to scroll down to see the rest of the options, it disappear.

SyncFusion version: 18.4.43

Thanks,



TS Thiyagu Subramani Syncfusion Team April 30, 2021 10:45 AM UTC

Hi John, 

Thanks for your update. 
                             
Query:It renders, but when i try to scroll down to see the rest of the options, it disappear.” 
                                                                                                        
To view the rest of the options in context menu we have prevented context menu’s close actions using args.cancel as true when scroll down the context Menu items. Using select and document’s click event we have managed isClick values and based on this we have closed context menu popup when we click document and select the context menu items. 

Please refer to the below code and sample link. 

created: function(args) { 
        // bind click event to close the context menu popup 
        this.getContent().addEventListener("click", onScroll); 
  }, 
  contextMenuOpen: function(args) { 
    args.element.ej2_instances[0].beforeClose = function(args) { 
      if (isClick) { 
        args.cancel = false; 
      } else { 
        args.cancel = true; 
      } 
      isClick = false; 
    }; 
    args.element.ej2_instances[0].select = function(args) { 
      isClick = true; 
    }; 
  }, 

function onScroll() { 
  isClick = true; 



Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Marked as answer
Loader.
Up arrow icon