How to make Columns dropdown in column menu responsive in Gantt chart

[Ashutosh Khanapure]

Hi, 

I'm having column menu feature implemented in Gantt chart. The gantt chart is wrapped inside an html div. Column dropdown in column menu loads fine when there is less number of columns but when columns increase, the dropdown goes to the top of the page. Please find the below image for reference:

 I've tried this on an example prepared from one of my community forums for column view. This issue occurs there also. Please find screenshot for that below and Kindly help in solving the issue. 

[Lokesh Arjunan]

Hi Ashutosh 

 

We validated your query and unable to replicate the issue though we render more number of columns. Can you please share us more details like video demonstration , code snippet of your code . If possible can you please replicate the issue in the attached sample. We have attached sample for your reference.  

 

Sample: https://stackblitz.com/edit/angular-o9t7ry?file=app.component.ts 

 

Regards, 

Lokesh 

[Ashutosh Khanapure]

please find below sample

https://angular-yxbbia.stackblitz.io

[Ashutosh Khanapure]

Please find sample as asked:

https://stackblitz.com/edit/angular-yxbbia?file=app.component.ts

[Monisha Sivanthilingam]

Hi Ashutosh, 

 

Thank you for sharing the issue reproducible sample. 

 

We have forwarded this issue to the concerned team. We will provide you with an update within two business days(November 11, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Ashutosh Khanapure]

Hi Monisha,

May I know when I could expect a solution if any for this issue?

Thanks,

Ashutosh 

[Monisha Sivanthilingam]

Hi Ashutosh, 

 

Thank you for your patience. 

 

The issue you reported can be resolved in the sample level itself. We can use the below style classes to resolve the issue. 

 

Index.html 

 

<style> 

 .e-contextmenu-wrapper ul.e-contextmenu { 

    width: 176px; 

    max-height: 300px; 

    overflow-y: scroll; 

 } 

</style> 

 

 

Sample: https://stackblitz.com/edit/angular-yxbbia-mx3cdj?file=index.html 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Ashutosh Khanapure]

Hi Monisha, 

I've added the css sytles you provided but the issue still persists. Please find below screenshot and sample URL attached below:

 

https://stackblitz.com/edit/angular-yxbbia-ug2dzh?file=app.component.css

[Lokesh Arjunan]

Hi Ashutosh,  

 

We are sorry for the inconvenience caused. 

  

We have forwarded this issue to the concerned team. We will provide you with an update within two business days(November 19^th , 2021).  

  

We appreciate your patience until then.  

  

Regards,  

Lokesh.  

[Ashutosh Khanapure]

Hi Lokesh, 

Please let me know if any progress on this issue.

Thanks,

Ashutosh

[Ashutosh Khanapure]

Hi,

Could I expect any progress in this issue or else is this a known issue with no solution yet?    

Thanks,

Ashutosh

[Monisha Sivanthilingam]

Hi Ashutosh, 

  

We apologize for the delay. 

  

We have confirmed your issue as bug and have logged a bug report for it. You can track its status from the below  feedback link. 

  

Feedback: https://www.syncfusion.com/feedback/30999/submenu-position-not-aligned-properly-while-scrolling-the-page  

  

The fix will be provided in the patch release scheduled for December 22, 2021. 

  

We appreciate your patience until then. 

  

Regards, 

Monisha 

[Lokesh Arjunan]

Hi Ashutosh 

  

We have validated the issue and found that we can resolve the reported issue by using the below CSS. 

  

 

 <style> 

      .e-contextmenu-wrapper ul.e-ul { 

        width: 176px; 

        max-height: 300px; 

        overflow-y: scroll; 

      } 

    </style> 

 

 

Sample: https://stackblitz.com/edit/angular-qghfiu?file=index.html 

 

Please check and get back to us, if you need further assistance 

  

Regards, 

Premkumar