Setting the max size of the overall dashboard

[Andy Corrigan]

Hi,

I'm having some grief with the dashboard layout. It seems to want 100% of the page - is there an easy way to make it stick to the space provided to it by the <main> element? As is, I'm having to scroll despite the fact that the elements being displayed fit if I don't use the dashboard. 

[Keerthana Rajendran]

Hi Andy, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked with your query and suspect that your requirement is to display the Dashboard Layout within the view port without scroller being appeared in the UI. We would like to let you know that in Dashboard Layout, initially all the panels height will be set equal to the width of the panel, so while rendering multiple panels within the layout may exceed the view port height and scroller may appear. However, we can adjust the height of these panels to render the panels within the view port by adjusting the CellAspectRatio property of the component as shown in the below code snippet. 

 

@using Syncfusion.Blazor.Layouts 

 

<div style="width:100%;"> 

    <SfDashboardLayout Columns="8" CellAspectRatio="@AspectRatio"> 

        <DashboardLayoutPanels> 

            <DashboardLayoutPanel Row="0" Col="0" SizeX="2" SizeY="2"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="2" SizeX="2" SizeY="2"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="4" SizeX="2" SizeY="2"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="6" SizeX="2" SizeY="2"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="2" Col="0" SizeX="4" SizeY="4"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="2" Col="4" SizeX="4" SizeY="4"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="4" Col="0" SizeX="6" SizeY="4"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="4" Col="6" SizeX="2" SizeY="4"> 

                <HeaderTemplate><div>Header</div></HeaderTemplate> 

                <ContentTemplate>Content</ContentTemplate> 

            </DashboardLayoutPanel> 

        </DashboardLayoutPanels> 

    </SfDashboardLayout> 

</div> 

@code{ 

 

    double AspectRatio = 2.1; 

 

} 

To know more about sizing the panels, please check the below documentation link.

UG Link: https://blazor.syncfusion.com/documentation/dashboard-layout/setting-size-of-cells 

 

For your convenience, we have also attached a sample with Dashboard Layout component been rendered within the view port by adjusting the cell size property of the component in the below link. Please check it. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard_Sample_EntireScreen-492043945 

 

Please get back to us if you need further assistance. 

 

Regards, 

Keerthana R. 

[Andy Corrigan]

Hi,

Thanks, I've ended up using some custom CSS on the top of the dashboard to get around the issue. 

However, it was the width of the dashboard itself that overflowed - not the size of indivi (i.e. the final column would require a scrollbar if in use); so it's possible that it may arise for other users.  

[Keerthana Rajendran]

Hi Andy, 

Thanks for the update. 

We are happy to hear that your issue is resolved. Please get back to us if you need further assistance. 

Regards, 

Keerthana R.