We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Sidebar auto not pushing

Hi, when I use SidebarType.Auto the sidebar dont push de @body content, if I select a wrong Target, the push works but the over dont work in small screens, will push, I inspect the class and both  has the right class e-push or e-over

this is all my code in MainLayout:



        <div class="header">

            <SfToolbar Height="100%">

                <ToolbarEvents Clicked="ToolBarButtonClick"/>


                    <ToolbarItem Id="Sidebar" Text="Uma Uñas" PrefixIcon="e-icons e-menu" CssClass="e-custom" Align="ItemAlign.Left">


                    <ToolbarItem Align="@ItemAlign.Center">


                            <div class="page-name">@CurrentPage</div>



                    <ToolbarItem Id="Settings" PrefixIcon="e-icons e-settings" Align="ItemAlign.Right" />




        <div class="main">

            <div class="content mb-3">@Body</div>


        <SfSidebar Width="160px" @bind-IsOpen="SidebarToggle" Target=".content mb-3" Type="SidebarType.Auto" HtmlAttributes="HtmlAttribute">


                <SfListView DataSource="@List" TValue="@SideBarPages" CssClass="template-list" ShowIcon="true">

                    <ListViewFieldSettings TValue="@SideBarPages" Id="Id" Text="Text" IconCss="Icon" />

                    <ListViewEvents TValue="SideBarPages" Clicked="OnSelect" />






        <Login />




    .default-sidebar {

        z-index: 999 !important;

        position: fixed !important;

        top: 50px !important;

        left: 0 !important;

        bottom: 0 !important;


    .header {

        z-index: 1000 !important;

        height: 50px !important;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;


    .content {

        margin-top: 50px !important;

        padding: 0 !important;


    .page-name {

        font-size: 20px;

        align-content: center;


    .list-wrapper {

        display: inline-flex;

        width: 100%;

        padding-bottom: 100px;


    .template-list {

        border: none !important;


        .template-list .list-item {

            line-height: 1.5;


    .e-text-content .e-icons {

        line-height: 1.4 !important;

        margin: 0 !important;

        font-size: 1rem;

        vertical-align: central !important;


    .e-list-text {

        font-size: 1rem;

        vertical-align: central !important;


    .e-control e-btn e-lib e-tbar-btn e-tbtn-txt :active {

        background-color: inherit !important;


    .e-toolbar-center {

        margin-left: auto !important;


    .e-toolbar .e-tbar-btn:focus {

        background-color: inherit !important;


    body {

        background-color: rgb(248,249,250) !important;



@code {

    private string CurrentPage = "Home";

    private SidebarPosition Position { get; set; } = SidebarPosition.Left;

    private bool SidebarToggle = false;

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()


        { "class", "default-sidebar" }


    private List<SideBarPages> List = new List<SideBarPages> {

        new SideBarPages { Id = "1", Text = "Inicio", Icon = "e-icons e-home", Link = "/"},

        new SideBarPages { Id = "2", Text = "Ventas", Icon = "e-icons e-description", Link = "/Sales"},

        new SideBarPages { Id = "3", Text = "Turnos", Icon = "e-icons e-clock", Link = "/Counter"},

        new SideBarPages { Id = "4", Text = "Resumen", Icon = "e-icons e-border-custom", Link = "/Counter"},

        new SideBarPages { Id = "5", Text = "Productos", Icon = "e-icons e-field-settings", Link = "/Product"},

        new SideBarPages { Id = "6", Text = "Servicios", Icon = "e-icons e-field-settings", Link = "/Counter"},

        new SideBarPages { Id = "7", Text = "Cursos", Icon = "e-icons e-field-settings", Link = "/Counter"},

        new SideBarPages { Id = "8", Text = "Clientes", Icon = "e-icons e-people", Link = "/Counter"},

        new SideBarPages { Id = "9", Text = "Gastos", Icon = "e-icons e-protect-workbook", Link = "/Counter"}


    private void ToolBarButtonClick(ClickEventArgs args)


        if (args.Item.Id == "Sidebar")


            SidebarToggle = !SidebarToggle;



    public void OnSelect(ClickEventArgs<SideBarPages> args)


        CurrentPage = args.ItemData.Text;




this is the SideBarPages class

public class SideBarPages


    public string Id { get; set; } = string.Empty;

    public string Text { get; set; } = string.Empty;

    public string Icon { get; set; } = string.Empty;

    public string Link { get; set; } = string.Empty;


6 Replies

PM Prasanth Madhaiyan Syncfusion Team October 6, 2022 09:47 AM

Hi Luis,

Greetings from Syncfusion support.

Currently, we are validating the reported query in the Blazor Sidebar component by preparing a sample like your shared codes. This issue occurs specific to your code, so we need some additional time to analyze the issue and will update you with further details on or before October 11, 2022.

We appreciate your patience


Prasanth Madhaiyan.

LM Luis Matias replied to Prasanth Madhaiyan October 12, 2022 06:08 AM

Hi, any news?

SS Sivakumar ShunmugaSundaram Syncfusion Team October 13, 2022 07:59 AM

Hi Luis,

Thanks for your patience.

From the shared details, we understand that you are facing an issue with the Blazor Sidebar component while setting the Type property as auto, which will not push the main content. We have checked the reported issue in the Sidebar component, and we were able to replicate the reported issue with the shared code details.

On our further validation, the reported issue occurs due to an incorrect Target value(".content mb-3") in the Sidebar component. To overcome the issue, we suggest you set the Target property as ".content" from your side. You need to map a single class name to the Target property. We have attached the modified sample to your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1930999042.zip

Please check the shared sample and get back to us if you need any further assistance.


Sivakumar S

LM Luis Matias replied to Sivakumar ShunmugaSundaram October 13, 2022 09:41 AM

the main issue persist in your example, the sidebar push but when the device screen is smaller, the sidebar still Push but should be set to Over; I think that was the point of using Auto

SS Sivakumar ShunmugaSundaram Syncfusion Team October 14, 2022 10:21 AM

Hi Luis,

We have validated the reported issue in the Blazor Sidebar component and considered it a bug on our end. The fix for this issue will be included in our weekly patch release on October 25, 2022. You can track the status of the issue fix using the following feedback link.

Feedback link: https://www.syncfusion.com/feedback/38446/blazor-sidebar-auto-type-is-not-working-properly-on-mobile-devices

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.

We appreciate your patience.


Sivakumar S

SS Sivakumar ShunmugaSundaram Syncfusion Team October 28, 2022 04:16 AM

Hi Luis,

Thanks for your patience.

We are glad to announce that our patch release (V20.3.52) has been rolled out successfully. The issue with “Blazor Sidebar Auto Type is not working properly on mobile devices" has been resolved in this release. To access this fix, we suggest you update the package to 20.3.52.

sample:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11595585568.zip

Release notes:  https://blazor.syncfusion.com/documentation/release-notes/20.3.52?type=all#sidebar

Feedback:  https://www.syncfusion.com/feedback/38446/blazor-sidebar-auto-type-is-not-working-properly-on-mobile-devices

Please let us know if you need any further assistance.


Sivakumar S

Live Chat Icon For mobile
Up arrow icon