How to position the dropdownMenu relative to SFDropDownButton that opened it

Question

I have a number of different SfDropDownButtons on a Blazor page that opens a dropdownmenu with the same content. When I open the DropDownMenu it is opening a dialog box that scrolls on the page that is not "anchored" to button that opened it. How can position the DropDownMenu relative to EACH individual SFDropDownButton on the page?Sample code is There a rows of these same divs for different products on the page and

Mohan Kumar Ramasamy · Accepted Answer

Hi Anna, 
 
Sorry for inconvenience caused. We have checked your reported query, we can reproduce the reported issue in our end. We have logged an issue report for this, and we will include this fix in any of our upcoming patch release. You can track the status in the below feedback link.  
 
Link:  https://www.syncfusion.com/feedback/17140/dropdown-popup-position-incorrect-when-scroll-tha-page 
 
We would like to let you know that, you can achieve the workaround solution your requirement. We have bound scroll event for parent element then called Toggle method. Please find the below sample 
 
Sample link:  https://www.syncfusion.com/downloads/support/forum/156884/ze/BlazorApp11465631839  
 
Please let us know if you need further assistance on this. 
 
Regards, 
Mohankumar R

Mohan Kumar Ramasamy · Answer

Hi Anna,

We have checked your reported query, we are not able to reproduce it in our end. We suspect that the problem occurs due to you refer old version style file.

Or

For your reference, we have prepared a sample based on this, please refer below link.

Link: https://www.syncfusion.com/downloads/support/forum/156884/ze/156884-BlazorApp1-1885885919

If you still face this issue due to the following cases.

· Due to the old Browser/NuGet cache.

o https://blazor.syncfusion.com/documentation/common/how-to/upgrade-syncfusion-components-to-latest-version/#cache-problem

· Outdated custom scripts referred in the application.

Also, could you please ensure the problem after clearing the browser/NuGet cache or run the application using incognito window of the browser.

kindly share the below details.

If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample

Please provide the above requested information, based on that we will check and provide you a better solution quickly.

Please let us know, if you need any further assistance,

Regards,

Mohankumar R

Grant Shoemaker · Answer

Hi Mohan.

Your example works with the default layout for a Blazor page. However, on your sample site, as well as the site we are developing with, the scrolling content area is not based on the overall position of the page itself, just the scroll area. To show this, open your own example page at https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=material and resize the browser so that the page scrolls vertically some. Click a dropdown menu and then use the mouse scroll wheel to scroll and you will see that the dropdown menu does not scroll along with the dropdown button. This is the same behavior we have in our application.

I have attached a screenshot of your demo page exhibiting the issue.

Attachment: Capture1_b914703e.zip