Sidebar is not pushing content to right

[Amjad Khan]

I have a sidebar beside the main content. The problem is when the sidebar opens, it always overlaps the main content, instead of pushing it to the right, even though I am using SidebarType.Push. Here is my code:

````

<div class="page">

        <main>

       

        <div class="control-container">

            <SfAppBar ColorMode="AppBarColor.Primary">

                <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" OnClick="SideMenu"></SfButton>

                <span class="regular">NDMA</span>

                <AppBarSpacer></AppBarSpacer>

                <SfButton CssClass="e-inherit" Content="Login"></SfButton>

            </SfAppBar>

        </div>

        <div>

        <SfSidebar HtmlAttributes="@HtmlAttribute" Target=".content" Width="220px" DockSize="0px" EnableDock="true" @bind-IsOpen="SidebarToggle" Type="@SidebarType.Push">

            <ChildContent>

                <div class="main-menu">

                    <div>

                        <div style="text-align: center;" class="text-content"> Sidebar </div>

                       

                    </div>

                </div>

            </ChildContent>

        </SfSidebar>

    </div>

        <article class="content px-4">

            @Body

        </article>

    </main>

</div>

[SureshRajan Alagarsamy]

Hi Amjad,

Based on your shared query and code snippet, we understand that you are facing an issue with the "Push" type property in the Sidebar component. We have prepared and tested the Sidebar sample with the "Push" type property, and it worked as expected in our latest package version (V20.4.51). We recommend that you update your Syncfusion package to the latest version (V20.4.51).

If updating the package to the latest version does not resolve the issue, please share with us a replicated sample. This will help us validate your query more efficiently and provide further assistance.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_(1)995555325.zip

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

[Amjad Khan]

Hi Suresh,

Thank you for your reply. I have attached a sample project for further investigation.

Regards,

Amjad.

Attachment: ndmatest_ebe11e64.zip

[SureshRajan Alagarsamy]

Hi Amjad,

We have validated your shared sample and were able to replicate the reported issue. After further investigation, we found that the "Target" property of the Sidebar was not set correctly, causing the main content to hide.

To resolve this issue, we suggest setting the "Target" property to ".e-main-content" as demonstrated in the code snippet below. Additionally, we recommend removing the div for the sidebar, as the sidebar is a default layout component and a div container is unnecessary.

Code Snippet :

[MainLayout.razor]

 

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".e-main-content" Width="220px" DockSize="0px" EnableDock="true" @bind-IsOpen="SidebarToggle" Type="@SidebarType.Push">

<ChildContent>

    <div class="main-menu">

        <div>

            <div style="text-align: center;" class="text-content"> Sidebar </div

        </div>

    </div>

</ChildContent>

</SfSidebar>

 

 

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: Sidebar_9cd534a7.zip