Charts on Mobile not rendering correct size

[Lee Stevens]

Using your demo charts as an example:

https://blazor.syncfusion.com/demos/chart/overview?theme=bootstrap5

if you inspect (chrome), switch to mobile view everything looks great. However as soon as you press F5 and refresh (so it is in a true mobile device mode) everything expands really tall.

I have the same issue on mine and thought I was going mad trying to fix it!

Thanks!

Attachment: postF5_a3e1bb81.png

[Lee Stevens]

Also your ticket system only allows one image to be uploaded per comment.

Attachment: preF5_cef396df.png

[Durga Gopalakrishnan]

Hi Lee,

Greetings from Syncfusion support.

We have analyzed your reported scenario with shared online demo link. We have rendered the charts inside the dashboard layout panels.  We would like to inform you that the Dashboard Layout is a grid-structured component that can be divided into subsections of equal size, known as cells. The total number of cells in each row is determined by the column’s property of the component. In mobile resolution, the column value is set to 1 by default, resulting in a stacked layout for the panels. This is the expected behavior of our Dashboard Layout component in mobile mode.

When the panel is rendered in a stacked layout, the panel height is based on its sizeX value, while its width is set to 1 for all panels. In the demo customer provided, all panel sizeX values are set to 1, which results in uniform width for all panels. We have already documented this scenario in our below mentioned UG link.

Documentation : https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Lee Stevens]

Hi, apologies on delay and thanks for the response.


Few points:

You can see clearly from the screen shot your demo chart is overflowing

You state that the ' This eliminates the need for manual configuration of responsive dashboards across various resolutions'.

However if the grid is configured to say 24 columns and I set something at 6,12 then you will display this at 1 x 12. Which clearly is not going to look great on a mobile device.

Surely if you do want it to look correct on a smaller layout you actually need 2 different configurations:

Such as

DesktopLayout: PieChartComponent 6,12
MobileLayoutL: PieChartComponent 1,3

Then pick up the fact the device is in mobile on page load and load the relevant layout?

[Durga Gopalakrishnan]

To ensure the Dashboard Layout works well on mobile devices, the panels automatically switch to a stacked layout (single vertical column) on smaller screens. This provides a fully responsive experience. By default, this stacked layout is triggered when the screen width is 600px or lower.

 

You can easily customize this breakpoint to any resolution you prefer by setting the MediaQuery property of the Dashboard Layout component.

 

In the sample below, we’ve set MediaQuery="max-width: 200px". This means the panels will remain in their normal grid layout until the screen width drops to 200px or less, at which point they switch to stacked.

 

Sample: https://blazorplayground.syncfusion.com/embed/rjBysiLcTwKxnSBK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Lee Stevens]

I understand what you do but I'm saying it just isn't responsive and you need 2 x layouts for desktop and mobile.
Of course if you pick a simple 1x2 example it will always work however if you use this example it does not look great.

I think you do need to code for both mobile and desktop and have different layout models for the mobile, unless I am missing something? Such as for the below you would have SizeY = 3 when in mobileview 

@using Syncfusion.Blazor.Layouts

<SfDashboardLayout CellSpacing="@(new double[]{20 ,20 })" Columns="12"

MediaQuery="max-width:200px">

    <DashboardLayoutPanels>      

        <DashboardLayoutPanel SizeX=10 SizeY=10>

            <ContentTemplate><div>1</div></ContentTemplate>

        </DashboardLayoutPanel>        

    </DashboardLayoutPanels>

</SfDashboardLayout>

<style>

    .e-panel-content {

        text-align: center;

        margin-top: 10px;

    }

</style>

[Durga Gopalakrishnan]

Lee,

Thank you for sharing your feedback on the dashboard layout responsiveness. We understand your concern regarding the need for different layouts for desktop and mobile views.

We have created a separate forum thread 197857 specifically for dashboard layout queries. We kindly request you to follow that forum for further updates on layout-related improvements.

For any questions related to charts, please continue using this current forum.