[Bug]: I have a problem with use DataGrid and the option of menu

[Weidmann16]

Blazorise Version

1.5

What Blazorise provider are you running on?

None

Link to minimal reproduction or a simple code snippet

When you select an option from the left menu, but there is a datagrid in the view, the columns of the datagrid overlap the selection which is why it looks bad

Steps to reproduce

the step by step is:

1. have the view open in the mobile version with a datagrid on the screen

2. Select an option from the menu on the left

What is expected?

the left menu is expected to overlap in the grid

What is actually happening?

datagrid columns overlap in left menu

What browsers do you see the problem on?

No response

Any additional comments?

No response

[stsrki]

Hello, I'm unable to reproduce the issue. Can you provide us with more information?

• The Provider that you use(Bootstrap, Fluent, etc.)?
• Sample code if possible.

[github-actions]

Hello @Weidmann16, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

[Weidmann16]

Hello I hope

you are having a good day.
The problem occurs on cell phones (this was reported by several users), I tried different browsers and the problem continues.

Below I leave the example on video and I will copy some code:

example.mp4

BarMenu:

<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     NavigationBreakpoint="Breakpoint.Tablet"
     ThemeContrast="ThemeContrast.Dark">

    <BarToggler />
    <BarBrand>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="IconName.LayerGroup" />
                Inicio
            </BarLink>
        </BarItem>
    </BarBrand>
    <AuthorizeView>
        <Authorized Context="AuthenticationState">
            <BarMenu>
                <BarStart>
                    <BarItem>
                        <BarDropdown>
                            <AuthorizeView Policy="ITC">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Ethernet" />
                                    Canales
                                </BarDropdownToggle>
                            </AuthorizeView>

Grid:

DataGrid TItem="SolicitudMantenimientoCambioEstado" Data="solicitudesMantenimientoEstado"
                  Sortable="true"
                    Responsive Narrow Filterable
                    Striped ShowPager FixedHeader PageSize="10"
                   UseInternalEditing="true"
         @bind-SelectedRow="selectSolicitud">
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.IdSolicitudMantenimiento" Caption="ID"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.UsuarioSolicitudMantenimiento.NombreUsuario" Caption="Nombre"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.UsuarioSolicitudMantenimiento.ApellidoUsuario" Caption="Apellido"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.SucursalCentroCostoSolicitudMantenimiento.SucursalSucursalCentroCosto.NombreSucursal" Caption="Local / Sucursal"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.SucursalCentroCostoSolicitudMantenimiento.CentroCostoSucursalCentroCosto.NombreAreaCentroCosto" Caption="Centro Costo"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.TipoMantenimientoOpcionTipoMantenimientoSolicitudMantenimiento.TipoMantenimientoFK.NombreTipoMantenimiento" Caption="Tipo"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.TipoMantenimientoOpcionTipoMantenimientoSolicitudMantenimiento.OpcionTipoMantenimientoFK.NombreOpcionTipoMantenimiento" Caption="Opción"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.NivelUrgenciaSolicitudMantenimiento.NombreNivelUrgencia" Caption="Urgencia"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.FechaSolicitudMantenimiento" Caption="Fecha"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="SolicitudMantenimientoSolicitudMantenimientoCambioEstado.ObservacionSolicitudMantenimiento" Caption="Observación"></DataGridColumn>
             <DataGridColumn TItem="SolicitudMantenimientoCambioEstado" Field="EstadoSolicitudMantenimientoSolicitudMantenimientoCambioEstado.NombreEstadoSolicitudMantenimiento" Caption="Estado"></DataGridColumn>
         </DataGrid>

[David-Moreira]

This seems to be an incompatibility with the FixedHeader feature. Since the FixedHeader basically applies an higher zindex, background white in order to remain on top of the other rows that are scrolled below.

You don't seem to actual be using the feature?

• You could try disabling for now.
• You could try playing with the zindex of the sidebar components in order to make them sit over the FixedHeader.

We'll take a look at making it compatible with the sidebar.

[Weidmann16]

Yeah that's right
Removing FixedHeader stops giving the error, so the problem is with this attribute.

[David-Moreira]

Hello I cannot seem to be able to reproduce this issue:

Do you have alot of custom css on your end? Would you like to pursue this issue? If so could you provide a github repo reproducing the issue?

[github-actions]

Hello @Weidmann16, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.