Dashboard not resizing properly

[Diogo]

Hi,

I have a dashbord layout and when i resize the window the components dont resize properly as you can see in the following images:

Full window ok:

when resize:

and on the mobile mode they stay to big to the screen, should be more readable:

i will attach the sample code

Best Regards

Attachment: BlazorDashboardSample_c8e4e579.rar

[SureshRajan Alagarsamy]

Hi Diogo,

Greetings from Syncfusion support.

We have reviewed your query and understand that you are facing issue with Dashboard Layout component during browser resizing. Upon testing the shared sample, we were able to replicate the reported issue on our end. After further validation, we found that wrapping the components inside a div tag while setting the div tag's “height” and “width” as 100% causes the component to become unresponsive upon browser resizing. To resolve this, we recommend removing the div tag and utilizing the component's "height" and "width" properties directly. This approach ensures the component remains responsive when the browser is resized.

Refer to the below code snippet for further reference.

[Index.razor]

 

<div class="content">

    <SfDashboardLayout @ref="dashboardObj" Columns="24" AllowResizing="true" AllowFloating="false" AllowDragging="false" CellSpacing="@(new double[]{10 ,10 })" ShowGridLines=true>

        <DashboardLayoutPanels>

            <DashboardLayoutPanel Id="Panel1" SizeX="9" SizeY="6" Row="6" Col="0">

                <HeaderTemplate><div class='header'> Customers Count </div></HeaderTemplate>

                <ContentTemplate>

                    <SfChart ID="linechart" @ref="linechartObj" Width="100%" Height="100%">

                            .....

                    </SfChart>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="Panel2" SizeX="6" SizeY="6" Col="0" Row="0">

                <HeaderTemplate><div class='header'> Product sales in Years </div></HeaderTemplate>

                <ContentTemplate>

                    <SfRangeNavigator ID="range" @ref="rangeObj" Value="@Value" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime" IntervalType="RangeIntervalType.Years" LabelFormat="yyyy" Width="100%" Height="100%">

                             ......

                       </SfRangeNavigator>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="Panel3" SizeX="9" SizeY="6" Row="6" Col="15">

                <HeaderTemplate><div class='header'> Sales Ratio in Countries </div></HeaderTemplate>

                <ContentTemplate>

                    <SfChart ID="chart" @ref="barchartObj" Width="100%" Height="100%">

                            .....

                       </SfChart>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="Panel4" SizeX=6 SizeY=6 Row="0" Col="9">

                <HeaderTemplate><div class='header'> Sales Comparison in Products  </div></HeaderTemplate>

                <ContentTemplate>

                        <SfChart ID="chart1" @ref="chartObj" Width="100%" Height="100%">

                             .....

                        </SfChart>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="Panel5" SizeX=6 SizeY=6 Col=18 Row=0>

                <HeaderTemplate><div class='header'> Top Customers Details</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid ID="grid" DataSource="@Orders" @ref=gridObj Width="100%" Height="100%">

                            ....

                    </SfGrid>

                </ContentTemplate>

            </DashboardLayoutPanel>

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

We have attached a sample for your reference.

Sample : Attached as zip folder.

Regards,
Suresh.

Attachment: BlazorDashboardLayout_Chart_13980ed1.zip