1. Home
  2. Forum
  3. Blazor
  4. Dashboard Layout panel size when used with Sidebar

Dashboard Layout panel size when used with Sidebar

I have noticed that the Dashboard Layout go out of the page when used with responsive Sidebar. Is there a fix for this? Also, the Sidebar closes when I swipe left on the body of the page. I want to remove this and keep it responsive only through the hamburger menu at the top. Lastly, the Sidebar encroaches into the header as observed in the attached file.


Attachment: BlazorAppTest_d4880ef8.zip

3 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team February 8, 2022 02:33 PM UTC

Hi Nick, 
 
Greetings from Syncfusion support. 
 
Please find the answer for your queries. 
 
Query 1: Dashboard Layout go out of the page when used with responsive Sidebar. 
 
By default, Dashboard Layout panel width and height will be inherited from their parent container. You should create a div container with a 100% height and width to render panels within page. Check the below code. 
 
<div class="container"> 
 <SfDashboardLayout Columns="2" CellSpacing="@(new double[]{20 ,20 })"> 
   ... 
<style> 
    .container{ 
        width: 100%; 
        height: 100%; 
    } 
</style> 
 
Also, if you set the sidebar Type as Auto, it will adjust the main content area so the dashboard goes off the page. However, you can set the sidebar Type as Over to open the sidebar over the main content area. Check the below code. 
 
<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)" 
            @bind-IsOpen="SidebarToggle" Type="SidebarType.Over" EnableGestures="false"> 
 
Query 2: The Sidebar closes when I swipe left on the body of the page. I want to remove this and keep it responsive only through the hamburger menu at the top. 
 
By default, the Sidebar EnableGestures property is in true state which will enables the expand or collapse while swiping. You can avoid this by setting EnableGestures value as false. Please check the below code snippet. 
 
<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)" 
            @bind-IsOpen="SidebarToggle" Type="SidebarType.Over" EnableGestures="false"> 
 
Query 3: The Sidebar encroaches into the header. 
 
You can resolve this by setting the below CSS style for Sidebar component. 
 
.e-sidebar { 
    ... 
    margin: 5px; 
} 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Marked as answer
ZD ZMI Dev July 6, 2022 11:46 AM UTC

Hello, we're facing the same problem with the sidebar and the dashboard layout. Is it possible to use the sidebar type "Auto" and the dashboard without the dashboard layout without the dashboard control being displayed larger than the parent container? 

Setting the container to width 100% (and max-width 100%) didn't solve the issue


IL Indhumathy Loganathan Syncfusion Team July 13, 2022 04:29 PM UTC

Hi DS,


We have set the Sidebar Type as Auto and to adjust the Dashboard panels within the Main Content area we have adjusted the margin-left CSS style. For your reference, we have attached the modified sample.


#main-text .sidebar-content {

    padding: 15px;

    margin-left: 275px !important;

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout-939361817


In a similar way, you need to adjust the panels within the Main content area. If issue still persists, please replicate the reported issue in the shared sample. Please get back to us if need any further assistance.


Regards,

Indhumathy L


Loader.
Up arrow icon