1. Home
  2. Forum
  3. Blazor
  4. Sidebar on MainLayout overlapping

Sidebar on MainLayout overlapping

Hi,

I updated to the latest version 18.3.x and I am using Blazor/Syncfusion with webassembly.

After the update my sidebar is overlapping the body content. The sidebar is implemented in the MainLayout. No change after adding the target information:

How the sidebar is implemented:

<SfSidebar @ref="sidebarObj" Width="220px" DockSize="auto" EnableDock="true" Type="SidebarType.Auto" @bind-IsOpen="@SidebarOpen" Target="#bodyContainer">
</SfSidebar>

<CascadingValue Value="@this" Name="MainLayout">
      <div id="bodyContainer">@Body</div>
</CascadingValue>


Any idea whats wrong?
Best regards,
Bernd

7 Replies
SP Sowmiya Padmanaban Syncfusion Team October 5, 2020 06:09 AM UTC

 
Hi Bernd Parchmann,   
  
Greetings from Syncfusion support.  
  
We have checked your attached code with Sidebar component. We found the exact case of your reported problem. By default, sidebar will consider next div element as a main-content for sidebar component. You have used Target property for Sidebar component. 
  
In your shared code snippet, you have used bodycontainer class as a target div for sidebar component, so, it pushes the first DIV element inside the BODY element. 
  
Refer your code snippet below.  
<div class="main"> 
    <div id="bodyContainer"> 
            @Body 
    </div> 
</div> 
  
To resolve your problem, you need to add the DIV element for BODY element. In that case, sidebar consider the entire element inside the BODY as a main-content for Sidebar component.  
  
Refer to the below code snippet.  
 
<div class="main"> 
    <div id="bodyContainer"> 
        <div> 
            @Body 
        </div> 
    </div> 
</div> 
  
Please, download the solution sample from the following link. 
 
 
Refer the below link to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


BP Bernd Parchmann October 5, 2020 09:16 AM UTC

Hi and thanks for your fast reply!

Unfortunally it's still not working. I changed the code according your example. As a precaution I have removed all styles in the MainLayout and tested outside the Layout!


MainLayout.razor:





   

I am wondering why this problem just occurs after update to the new release version?! If I switch back to 18.2.x it's working!

And a small question by the way: Why the sidebar is just open/expanded after two clicks if I set type of sidebar to not Auto? With type Auto its working fine.

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team October 6, 2020 01:42 PM UTC

Hi Bernd, 
 
We validated your reported problem with your provided code in Sidebar component. We were unable to reproduce your reported problem as Sidebar working properly without any reported issues. 
 
 
Can you please share us your issue occurred application or replicate your reportem problem in the below attached sample? 
 
This information would help us to replicate your reported problem at our end and to provide you the prompt solution. 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


BP Bernd Parchmann October 6, 2020 02:27 PM UTC

Hi,

the only difference I can see is that I am using WebAssembly. And just after upgrading to V 18.3.x the Sidebar is not working correctly. 
I added my css styles to your test project and its working fine, too! So the styles are fine. 

Which files do you need at least to test?

SP Sowmiya Padmanaban Syncfusion Team October 7, 2020 01:14 PM UTC

Hi Bernd Parchmann,  
 
We have checked your reported problem with sidebar component. We suspect that your reported issue may be occurred due to docksize value in Sidebar component. To resolve your issue, we suggest you to set the value for dockSize property Sidebar component in pixel unit. 
 
Refer the below code snippet. 
 
<SfSidebar ID="sidebar" @ref="_sidebar" Width="220px" EnableDock="true" 
           Type="SidebarType.Push" Target="@target" DockSize="72px" > 
    <ChildContent> 
        <div style="background:blue;height:100%;"> 
            <h4 class="mb-10">Sidebar</h4> 
        </div> 
    </ChildContent> 
</SfSidebar> 
<div class="main"> 
    <div id="body-container"> 
        <div style="height:100vh;"> 
            @Body 
            <SfButton OnClick="Show" IconCss="e-icons e-close">Open Sidebar</SfButton> 
        </div> 
    </div> 
</div> 
 
Please, refer the sample link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


BP Bernd Parchmann October 7, 2020 01:19 PM UTC

Already changed and tested! The only effect is: with size in pixel the closing effect is animated. with auto -> without animation.

SP Sowmiya Padmanaban Syncfusion Team October 8, 2020 07:01 AM UTC

Hi Bernd Parchmann,  
 
We have created a separate incident I296759  under your Direct-trac account. Please follow that incident for future update related to Sidebar component. 
  
Please let us know, if you need any further assistance. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon