SFMenu with children won't open

[Jeremy White]

I'm unable to get menus opening on my pages. Other interactive elements are working just fine. I've been using this framework for months without issue. It's odd this one element wants to be difficult :( Serverside rendering options are set Script package is references in the App.razor App.Razor @page "/jobs" @inject IJobService JobService @inject IJSRuntime JSRuntime @inject IListEntryService ListEntryService @rendermode InteractiveServer @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using WorkforceViewer.Core.Models @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Notifications @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Data; @using Syncfusion.Blazor.Spinner @using Syncfusion.Blazor.Diagram @using WorkforceViewer.Components.Forms @using WorkforceViewer.Components.Layout @attribute [Authorize]

Add/Edit Job

[Jeremy White]

The text editor is behaving oddly. 


Jobs.Razor 

@page "/jobs"

@inject IJobService JobService

@inject IJSRuntime JSRuntime

@inject IListEntryService ListEntryService

@rendermode InteractiveServer

@using Microsoft.AspNetCore.Authorization

@using Microsoft.AspNetCore.Components.Authorization

@using WorkforceViewer.Core.Models

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Notifications

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data;

@using Syncfusion.Blazor.Spinner

@using Syncfusion.Blazor.Diagram

@using WorkforceViewer.Components.Forms

@using WorkforceViewer.Components.Layout

@attribute [Authorize]

<SfDialog Width="800px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@showJobForm">

    <DialogTemplates>

        <Header>Add/Edit Job</Header>

        <Content>

            <JobForm Job="newJob" IsEditMode="@IsEditMode" OnSave="HandleJobSaved" OnCancel="CloseForm" />

        </Content>

    </DialogTemplates>

</SfDialog>

<SfSpinner @ref="SpinnerObj" CssClass="e-spin-overlay">

</SfSpinner>

<div class="jobsContent">

    <div class="menu-bar">

        <SfMenu TValue="MenuItem" ShowItemOnClick="true" @ref="MenuObj">

            <MenuItems>

                <MenuItem Text="Add" IconCss="e-icons e-circle-add"></MenuItem>

                <MenuItem Text="Edit" IconCss="e-icons e-edit" Disabled="@(!SingleRowSelected)"></MenuItem>

                <MenuItem Text="Delete" IconCss="e-icons e-close" Disabled="@(!RowsSelected)"></MenuItem>

                <MenuItem Text="Clear" IconCss="e-icons e-clear-rules"></MenuItem>

                <MenuItem Text="@FilterText" IconCss="e-icons e-filtered"></MenuItem>

                <MenuItem Text="@GroupText" IconCss="e-icons e-group-1"></MenuItem>

                <MenuItem Text="Columns" IconCss="e-icons e-table-insert-column"></MenuItem>

                <!-- New Export Menu -->

                <MenuItem Text="Export" IconCss="e-icons e-export">

                    <MenuItems>

                        <MenuItem Text="Columns" IconCss="e-icons e-table-insert-column"></MenuItem>

                       

                    </MenuItems>

                </MenuItem>

                <MenuItem Text="Org Chart" IconCss="e-icons e-hierarchy"></MenuItem> <!-- New Org Chart item -->

            </MenuItems>

            <MenuEvents TValue="MenuItem" ItemSelected="ItemSelected"></MenuEvents>

        </SfMenu>

        <SfTextBox Placeholder="Search..." @oninput="@(e => RunSearch(e.Value.ToString()))" ShowClearButton="true" Width="225px"></SfTextBox>

    </div>
*****Skipping some content for brevity**

private async Task ItemSelected(MenuEventArgs<MenuItem> args)

{

    var selectedItem = args.Item.Text;

    switch (selectedItem)

    {

        case "Add":

            grid.AddRecordAsync();

            break;

        case "Edit":

            grid.StartEditAsync();

            break;

        case "Delete":

            showConfirmationDialog = true;

            StateHasChanged();

            break;

        case "Clear":

            ClearAllSelections();

            break;

        case MainLayout.FILTER_OFF_TEXT:

            ToggleFiltering();

            FilterText = MainLayout.FILTER_ON_TEXT;

            StateHasChanged();

            break;

        case MainLayout.FILTER_ON_TEXT:

            ToggleFiltering();

            FilterText = MainLayout.FILTER_OFF_TEXT;

            StateHasChanged();

            break;

        case MainLayout.GROUPING_ON_TEXT:

            ToggleGrouping();

            GroupText = MainLayout.GROUPING_OFF_TEXT;

            StateHasChanged();

            break;

        case MainLayout.GROUPING_OFF_TEXT:

            ToggleGrouping();

            GroupText = MainLayout.GROUPING_ON_TEXT;

            StateHasChanged();

            break;

        case "Upload":

            isUploadDialogVisible = true;

            break;

        case "Org Chart": // New case for Org Chart

            await LoadOrgChart();

            showOrgChartDialog = true;

            StateHasChanged();

            break;

        case "Export to PDF":

            await grid.ExportToPdfAsync();

            break;

        case "Export to Excel":

            await grid.ExportToExcelAsync();

            break;

        case "Export to CSV":

            await grid.ExportToCsvAsync();

            break;

        case "Columns":

            var position = await JSRuntime.InvokeAsync<MainLayout.Position>("getMenuItemPosition", "Columns");

            await grid.OpenColumnChooserAsync(position.x-100, position.y-100);

            break;

        case "Export":

            var item = MenuObj.Items[MenuObj.GetItemIndex(args.Item).FirstOrDefault()];

            break;

    }

App.Razor

<!DOCTYPE html>

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/24.2.3/styles/tailwind.css" rel="stylesheet" />

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="app.css" />

    <link rel="stylesheet" rel='nofollow' href="WorkforceViewer.styles.css" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

    <HeadOutlet @rendermode="InteractiveServer" />

</head>

<body style="background:white">

    <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

    <script src="_framework/blazor.web.js"></script>

[Jeremy White]

display: flex is what causes it to stop working.  I need to move my menu items to the right side of element.  Flex and inline flex both work, but stop the buttons from opening.  Click events still fire, they just don't open. 

.e-menu-container {

    width: 100%;

    display: flex;

    justify-content: right;

    background: white;

}

[Jeremy White]

After some digging, I've found the menus are actually opening "off screen" far to the right of the content.
When using flex and right align, it's pushing the submenu off. 

[Keerthikaran Venkatachalam]

Hi Jeremy,

We have reviewed the reported query, and you are applying the CSS style using the “e-menu-container” class. However, this class is used for both the parent menu and the submenu, which is the only issue. To move the menu component to the right side of the page, you can wrap the menu component inside a parent `<div>` element and then use CSS to align the `<div>` to the right. Please refer to the code snippets below for implementation details.

<div class="e-custom-menu">

<SfMenu ShowItemOnClick="true" TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="File">

            <MenuItems>

                <MenuItem Text="Open"></MenuItem>

                <MenuItem Text="Save"></MenuItem>

                <MenuItem Text="Exit"></MenuItem>

            </MenuItems>

        </MenuItem>

        <MenuItem Text="Edit">

            <MenuItems>

                <MenuItem Text="Cut"></MenuItem>

                <MenuItem Text="Copy"></MenuItem>

                <MenuItem Text="Paste"></MenuItem>

            </MenuItems>

        </MenuItem>

    </MenuItems>

</SfMenu>

</div>

<style>

    .e-custom-menu {

        width: 100%;

        display: flex;

        justify-content: right;

        background: white;

     }

</style>

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V