Dashboard size not fitting page

[Cristobal]

Hi Syncfusion team,

I am implementing a dashboard, the layout of my application is a SfAppBar on top and a dockable SfSidebar on the left. When the application is first loaded it starts with the dashboard. However, the size of it is not fitting the page, it is wider than it (see picture 1). If I expand the dock, it is not adjusting its size, it is just moving to the right (see picture 2). If I navigate to another page (same layout) and go back to the dashboard, the dashboard displays properly (see picture 3). If then I expand the sidebar, it is shifted again to the right (see picture 4). If I go again to a page with the expanded sidebar and get back, it fits the page (see picture 5). If I collapse the sidebar, again is not adjusted (see picture 6).

What could explain this behavior?

Thanks.

Cristobal.

Picture 1:

Picture 2:

Picture 3:

Picture 4:

Picture 5:

Picture 6:

[Cristobal]

Picture 6 seems to be broken. Here it is again:

[LeoLavanya Dhanaraj]

Hi Cristobal,

Greetings from Syncfusion support.

Based on the details you shared, we understand that you are experiencing an issue with the Blazor Dashboard Layout component refreshment when rendering inside the Sidebar component.

So, we have created a Dashboard sample that is similar to your panel rendering code and found that the issue is caused by the Dashboard component's available space not being compatible with the Sidebar component. Additionally, the Dashboard component is not being properly refreshed when the Sidebar is closed/ opened and page reloaded. To resolve this issue, we suggest that you use the Dashboard RefreshAsync method to refresh the Dashboard within the Sidebar Changed and Created events.

Check out the below mentioned code snippets for further assistance.

<SfSidebar @ref="sidebarObj" Width="220px" DockSize="72px" EnableDock=true @bind-IsOpen="SidebarToggle" Created="created" Changed="changed">

</SfSidebar>

 

@*main content declaration*@

<div id="main-content container-fluid col-md-12">

    <div style="margin:10px 0 10px 10px;">

        <SfDashboardLayout @ref="DashboardObj">

            <DashboardLayoutPanels>

                <DashboardLayoutPanel>

                </DashboardLayoutPanel>

            </DashboardLayoutPanels>

        </SfDashboardLayout>

    </div>

</div>

    

@code {

    SfDashboardLayout DashboardObj;

    public async Task created()

    {

        await Task.Delay(500);

        await DashboardObj.RefreshAsync();

    }  

 

    public async Task changed()

    {

        await DashboardObj.RefreshAsync();

    }

}

Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: SidebarWithDashboard_5405936f.zip