Problem with submenu on mobile screen

[Guilherme Cremasco]

Hello.

I'm trying to implement a responsive Dropdown Menu, so I'm testing the menu with differents screen sizes. My menu has some items with submenus.

When I test the menu on large screen, it works perfectly. But if I test it on small screens, then a strange problem occurs. If I click on a item that is a submenu, the submenu's popup shows on the top left corner of the screen, staying out of where it should be.

How can I fix this? I'm sending an example of the menu implementation.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.SplitButtons

@code {
    SfDropDownButton FileButton;
    SfContextMenu ContextMenu;
    public bool isClose = false;

    private void DropDownButtonClose(BeforeOpenCloseMenuEventArgs args)
    {
        args.Cancel = true;
    }
    private void BeforeClose(BeforeOpenCloseMenuEventArgs args)
    {
        if (!isClose)
        {
            FileButton.Toggle();
        }
    }
    public class ContextMenuItemModel
    {
        public List Items { get; set; }
        public string Content { get; set; }
        public string Id { get; set; }
        public string IconCss { get; set; }
        public Boolean Separator { get; set; }
    }
    private List FileMenuItems = new List{
                new ContextMenuItemModel {Id ="FileMenuItemsNew", Content = "Align" , Items = new List {
                        new ContextMenuItemModel { Content="Left" },
                        new ContextMenuItemModel { Content="Right" },
                        new ContextMenuItemModel { Content="Center" },
                        new ContextMenuItemModel { Content="Top"},
                        new ContextMenuItemModel { Content="Bottom" },
                        new ContextMenuItemModel { Content="Middle"}
                    }},
                new ContextMenuItemModel {Id ="FileMenuItemsOpen", Content = "Open" },
                new ContextMenuItemModel { Separator = true },
                new ContextMenuItemModel { Id ="FileMenuItemsSave",Content = "Space", Items = new List {
                        new ContextMenuItemModel { Content="Double" },
                        new ContextMenuItemModel { Content="Single" },
                        new ContextMenuItemModel { Content="Small" },
                        new ContextMenuItemModel { Content="Big"},
                        new ContextMenuItemModel { Content="Large" },
                    }},
                new ContextMenuItemModel { Id ="FileMenuItemsSaveAs",Content = "Save As", Items = new List {
                        new ContextMenuItemModel { Content="PDF" },
                        new ContextMenuItemModel { Content="Excel" },
                        new ContextMenuItemModel { Content="Word" },
                        new ContextMenuItemModel { Content=".XLS"},
                    } },
                new ContextMenuItemModel {Id ="FileMenuItemsExport", Content = "Export"},
                new ContextMenuItemModel { Separator = true},
                new ContextMenuItemModel { Id ="FileMenuItemsPrint",Content = "Print" }
            };

    public async Task OnMenuCreated()
    {
        await ContextMenu.OpenAsync();
    }

    public void Selected(MenuEventArgs args)
    {
        if (args.Item.Content == "Space" || args.Item.Content == "Save As" || args.Item.Content == "Align")
        {
            isClose = true;
        }
        else
        {
            isClose = false;
        }
    }
}

[Keerthikaran Venkatachalam]

Hi guigulmini,

We have confirmed the issue as “Context Menu position issue occurred in mobile mode" and logged a defect report. We will include the fix for this issue in the upcoming weekly release scheduled for the third week of July 2024.

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

KeerthiKaran K V

[Guilherme Cremasco]

Ok, thank you.

[Keerthikaran Venkatachalam]

Hi guigulmini,

We are glad to announce that our weekly patch release (26.1.41) has been rolled out. We have included the fix for this “Context Menu position issue occurred in mobile mode” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end (26.1.41)

Root cause: The underlying reason for the problem is that when opening the context menu, we moved the parent context UL element to the body, causing a position issue in the context menu.

Package link: https://www.nuget.org/packages/Syncfusion.Blazor.Navigations

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V