1. Home
  2. Forum
  3. Blazor
  4. Problem while using the Menu bar

Problem while using the Menu bar

I am using the menu, but we do not know if it is because there are many items but when I start it a part is compressed and it is overwritten. This problem when opening the browser item inspector and then closing it disappears and is seen normally. I don't know if it's a bug that I can fix or it's a menu bug. Attached photos of the problem.











3 Replies 1 reply marked as answer
GK Gayathri KarunaiAnandam Syncfusion Team February 4, 2021 03:14 PM UTC

Hi Gonzalo, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported query and we cannot be able to reproduce the issue in our end. 
 
We suggest you the enableScrolling property which provides scrollable option in Menu as demonstrated in the below code snippet 
 
Code: 
<SfMenu Items="@MenuItems" CssClass="e-custom-scroll" EnableScrolling="true"> 
            <MenuEvents TValue="MenuItem"></MenuEvents> 
        </SfMenu> 
 
 
For your reference, we have prepared a sample based on your requirement 
 
 
 
If you are still facing the issue, kindly share the below details. 
 
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample
  • If possible, please share the video of the issue.
  • Please share the version you are using.
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Gayathri K 


MM Matias Mutz February 4, 2021 06:10 PM UTC

Hello Gayathri, I am a friend of Gonzalo. I will show you more details of the problem.

Code:
@using Syncfusion.Blazor.Navigations


@code {

    [CascadingParameter] private Task AuthenticationStateProvider { get; set; }

    public List MenuItems = new List{
        new MenuItem {Text="INICIO", Url="/home", IconCss = "oi oi-home"},

        new MenuItem{ Text = "ADMINISTRACIÓN", IconCss = "e-icons e-file", Items = new List{
            new MenuItem { Text= "Parámetros", IconCss= "e-icons e-open" },
            new MenuItem { Separator= true },
            new MenuItem { Text= "Recálculo de stock", IconCss= "e-icons e-save" },
            new MenuItem { Text= "Monedas", Url= "/monedas"},
            new MenuItem { Separator= true },
            new MenuItem { Text= "índices y tasas de cambio" , Url="/indic" },
            new MenuItem { Text= "Usuarios y contraseñas" }}},

        new MenuItem{ Text = "ABASTECIMIENTO", IconCss = "e-icons e-edit", Items = new List{
            new MenuItem{ Text= "Compras", IconCss= "e-icons e-cut" },
            new MenuItem { Separator= true },
            new MenuItem{ Text= "Estado de ordenes de compras", IconCss= "e-icons e-copy" }}},

        new MenuItem{ Text = "INVENTARIOS", Items = new List{
            new MenuItem { Text= "Administración de stock", Url="/stockoperaciones" },
            new MenuItem { Separator= true },
            new MenuItem{ Text = "Saldos de stock"}}},

        new MenuItem { Text = "PCP", Items = new List{
            new MenuItem { Text= "Pronóstico de ventas" },
            new MenuItem { Separator=true },
            new MenuItem { Text= "Pedidos de clientes" },
            new MenuItem { Text= "PCP", Url="/prev" }}},

        new MenuItem { Text = "INGENIERÍA", Items = new List{
            new MenuItem { Text= "Lista de materiales y hoja de ruta" },
            new MenuItem { Text= "Celdas", Url="/celdas" },
            new MenuItem { Separator=true },
            new MenuItem { Text= "Tipos de celdas", Url="/tipocelda" },
            new MenuItem { Text= "Áreas" , Url="/area" },
            new MenuItem { Text= "Líneas", Url="/linea" },
            new MenuItem { Separator=true },
            new MenuItem { Text= "Tipos de paradas de máquina" , Url="/parada"},
            new MenuItem { Text= "Tipos de insumos" },
            new MenuItem { Text= "Procesos" },
            new MenuItem { Text= "Tareas de procesos" },
            new MenuItem { Text= "Categoría de operarios", Url="/cateope" },
            new MenuItem { Separator=true },
            new MenuItem { Text = "Abms", Items = new List{
                new MenuItem { Text= "Clase", Url="/clase" },
                new MenuItem { Text= "Depositos", Url="/depos" },
                new MenuItem { Text= "Operarios", Url="/operario" },
                new MenuItem { Text= "Países", Url="/pais" },
                new MenuItem { Text= "prod", Url="/prod" },
                new MenuItem { Text= "protab", Url="/protab" },
                new MenuItem { Text= "protarea", Url="/protarea" },
                new MenuItem { Text= "scrap", Url="/scrap" },
                new MenuItem { Text= "tipo area", Url="/tipoarea" },
                new MenuItem { Text= "turnos", Url="/turnos" }}}},},

        new MenuItem{ Text = "CALIDAD", Items = new List{
            new MenuItem { Text= "Registro de no conformidades" },
            new MenuItem { Separator= true },
            new MenuItem { Text= "Tipos de no conformidades" , Url="/tiposnoconf" }}},

        new MenuItem { Text = "COSTOS", Items = new List{
            new MenuItem { Text= "Costos estándar" },
            new MenuItem { Text= "Costos de productos dados de alta" }}},

        new MenuItem { Text = "CONTROL DE CALIDAD", Items = new List{
            new MenuItem { Text= "Registro de ensayos" },
            new MenuItem { Text= "Trazabilidad" }}}};
}
Photos and explanation:
When I first compile the project the menu seems to be compressed, here a photo:

This is maybe because we have a lot of items but we need to have them all, is there a way to put them in a better way? You could also see that in the right side the menu is not getting to the right border.
The other problem that we are facing is that when we have a page with a grid that has a long width the menu is also that long. Here I will attach a photo of the left side of the page and another of the medium (talking about horizontal position/horizontal scrolling).
Left:

Medium:

I will also attach the link to a drive video showing what i explained. I could not attach the video in the forum cause it was 40MB the file size.
Link: https://drive.google.com/file/d/1frWQZM0EmYGntCYVrlCgp1DcnG5Qc8V7/view?usp=sharing

Another question that i have is if i can make these buttons:

static so if i scroll horizontal in the grid i can keep see them so this dont happens:


Thanks and best wishes, Matias.

Edit: Sorry but i forget to put the Syncfusion version we are currently using. The version is 18.4.0.39.

GK Gayathri KarunaiAnandam Syncfusion Team February 7, 2021 02:21 PM UTC

Hi Matias, 

We have checked your reported query and we cannot be able to replicate the issue in our end.  

We suspect that the menu override issue occurs due to the menu customization using CSS style. 

We can reduce the grid width by setting maximum width to the grid component which makes grid scrollable horizontally. 

We have prepared a sample based on your requirement. Please check the below code snippet and sample 

Code Snippet: 
    <div style="float:left;position:relative"> 
        <button class="e-flat"> About</button> 
    </div> 
    <div style="float:left;position:static"> 
        <SfMenu Items="MenuItems"></SfMenu> 
    </div> 
 
<br /><br /><br /> 
<div style="float: left"> 
    <SfGrid TValue="Order" AllowPaging="true"> 
        <SfDataManager Url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></SfDataManager> 
        <GridColumns> 
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipName) HeaderText="ShipName" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipAddress) HeaderText="ShipAddress" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipCity) HeaderText="ShipCity" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipRegion) HeaderText="ShipRegion" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipPostalCode) HeaderText="ShipPostalCode" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipName) HeaderText="ShipName" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipAddress) HeaderText="ShipAddress" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipCity) HeaderText="ShipCity" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipRegion) HeaderText="ShipRegion" Width="150"></GridColumn> 
            <GridColumn Field=@nameof(Order.ShipPostalCode) HeaderText="ShipPostalCode" Width="150"></GridColumn> 
        </GridColumns> 
    </SfGrid> 
 
</div> 
 
<style> 
    .sf-grid { 
        width: 67% !important; 
        overflow-x: scroll; 
    } 
</style> 

 
Kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  
·        Please share the issue reproducible sample.  
·        If you have customization in your sample, please share CSS file.  
 
Regards, 
Gayathri K 


Marked as answer
Loader.
Up arrow icon