Panel height to remain fixed

[Sandip Mane]

Hello,

In responsive layout, panel height in Dashboard layout increases a lot. Is there a way to control height of panel when browser page is resized or viewing device is mobile?

My layout is simple with 2 panels as below.

@using Syncfusion.Blazor.Layouts

<SfDashboardLayout CellSpacing="@(new double[]{5 ,5 })" Columns="12" MediaQuery="max-width:700px">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel Id="MidCenterPanel" Column=1 Row=0 SizeX=10 SizeY=32>

            <ContentTemplate><div>0</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Id="BottomPanel" Column=0 Row=33 SizeX=12 SizeY=1>

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

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

<style>

    .e-panel-content {

        text-align: center;

        margin-top: 10px;

    }

</style>

When I tried this layout at https://blazorplayground.syncfusion.com/ with Browser developer tools, width and height of Panel '0' is 654.729 x 1465.9 which when changed to responsive device (or any mobile listed in chrome)  width and height of same Panel becomes 354.36 x 6553.9. In this case, width reduction is okay, but height increases a lot. Is it possible to keep height at same at around  1465.9. Thanks.

[Prasanth Madhaiyan]

Hi Sandip Mane

Greetings from Syncfusion support.

Currently, the Syncfusion Blazor Dashboard Layout component does not have built-in support to maintain the same height for panels based on screen resolution. We have identified this as a potential feature and added it to our roadmap. This feature will be included in one of our upcoming releases based on factors such as customer demand, feature ranking, and our internal wish list planning.

You can track the status of this feature request using the link below:

https://www.syncfusion.com/feedback/21390/fixed-height-support-for-dashboard-layout-component-for-both-initial-rendering-and

Regards,

Prasanth Madhaiyan.

[Sandip Mane]

Hi Prasanth,

Thanks. I have already seen the link that you have shared for a feature request. This feature request seems to be old request, and comment suggests that it has been implemented in the product. But, I could not understand how it got implemented or how to use it from the reply. I also tried setting maximum height MaxSizeY for a panel, but that too did not work.

Is there a way to control height through stylesheet css? If yes, please let me know.

 I am searching for various ways , but not finding a concrete solution yet.

[Prasanth Madhaiyan]

Hi Sandip Mane,

To further enhance the responsiveness of the Blazor Dashboard Layout component, you can utilize the MediaQuery property. This property allows you to define a media query that will trigger a stacked layout when the specified resolution is met.

For example, setting MediaQuery="(max-width:300px)" will adjust the layout when the screen width is 600 pixels or less.

To learn more, refer to the documentation link below.

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

You can also dynamically adjust the CellAspectRatio property of the Dashboard Layout component based on the screen resolution using the MediaQuery property. Based on the screen resolution, you can adjust the height of the Dashboard Layout panel. 

Refer to the code snippet below. 

[Home.razor]

<SfMediaQuery @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>

<h3>The active breakpoint is @activeBreakpoint</h3>

<SfDashboardLayout CellSpacing="@(new double[] { 5, 5 })" Columns="12" CellAspectRatio="@CellAspectRatio" MediaQuery="max-width:700px">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel Id="MidCenterPanel" Column=1 Row=0 SizeX=10 SizeY=32>

            <ContentTemplate><div>0</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Id="BottomPanel" Column=0 Row=33 SizeX=12 SizeY=1>

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

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

@{

    if (activeBreakpoint == "Small")

    {

        CellAspectRatio = 2;

    }

    else

    {

        CellAspectRatio = 1;

    }

}

@code {

    private string activeBreakpoint;

    private double CellAspectRatio = 1;

    // Sample Initialization

    protected override void OnInitialized()

    {

        SfMediaQuery.Small.MediaQuery = "(max-width: 700px)";

        SfMediaQuery.Medium.MediaQuery = "(min-width:1200px)";

        SfMediaQuery.Large.MediaQuery = "(min-width: 1600px)";

    }

}

<style>

    .e-panel-content {

        text-align: center;

        margin-top: 10px;

    }

</style>

For your reference, we have attached the sample. 

Sample: Attached as a zip file. 

Check out the shared details and let us know if you need further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorApp1_2606194b.zip

[Sandip Mane]

Hi Prasanth,

Thanks. Looks like you created sample attachment with net9.0 whereas I use net8.0. I tried modifying for dotnet 8 and build it, but again few static assets were missing. Eventually I built but started getting some runtime error. Sorry, I am not very good at dotnet or syncfusion. Could you please rebuild at your end with net8.0 and syncfusion version 26.2.8.

Also, I tried code snippet directly in blazor playground and it is not giving expected result. I am suspecting that CellAspectRation is not getting modified as expected for 'small' breakpoint. please help.

[Sandip Mane]

Hi Prasanth,

As per Syncfusion documentation, default mediaquery applies at 600px and then panels get stacked vertically. Vertical stacking is fine, but syncfusion also changes height of panels. Changing  CellAspectRatio dynamically as provided by you is not working (atleast when tried in syncfusion playground). I also tried changing panel parameters (sizey, row) dynamically from code in method OnAfterRenderAsync(), but that too did not work.

Can you please talk to syncfusion product development team and ask if there is any way we can control panel height in responsive layout.

Other option, as suggested by you, is to use  setting MediaQuery="(max-width:300px)"​. I already tried this option, but it has other consequences. My grid table in normal page layout contains 50 records per page and as screen width goes decreasing for small viewport (mobile device), it can accommodate only 20 or even less records. So, in that case, data will be spread across many number of pages (user requires to keep selecting next page more). If I allow data records to overflow, then my bottom panel below data grid panel gets overwritten.

Somehow, I feel like this is very common requirement for responsive behaviour and hence curious to know how other people solve this problem. 

[Prasanth Madhaiyan]

Hi Sandip Mane,

Based on the details you shared, we have prepared a Dashboard Layout component sample by rendering the Grid component with 50 records on the first page, using the PageSize="50" setting in the GridPageSettings API. We verified this on both desktop and small screens, and it displays 50 records properly without any issues.

However, to resolve overlapping issues, you need to set the Height and Width properties of the Grid component to 100%.

Please refer to the below code snippets. 

 [Home.razor]

...

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Grids

<SfMediaQuery @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>

<SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[] { 5, 5 })" Columns="12" CellAspectRatio="@CellAspectRatio" MediaQuery="max-width:300px">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel Id="MidCenterPanel" Column=1 Row=0 SizeX="10" SizeY="3">

           

            <ContentTemplate>

                <SfGrid DataSource="@GridData" AllowPaging="true" Width="100%" Height="100%">

                    <GridPageSettings PageSize="50"></GridPageSettings>

                    <GridColumns>

                        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

                        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>

                        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

                        <GridColumn Field=@nameof(OrdersDetails.Freight) Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

                        <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>

                    </GridColumns>

                </SfGrid>

            </ContentTemplate>

           

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Id="BottomPanel" Column=0 Row=33 SizeX=12 SizeY=1>

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

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

@code {

    ...

...

For your reference, we have attached the sample and screenshots.

Sample: Attached as a zip file. 

Screenshots:

Desktop	Mobile

Please review the attached sample. If the issue still persists, kindly replicate the issue using the attached sample or share a runnable issue sample along with video footage to help us better understand the problem. These details will assist us in investigating the issue and providing you with a prompt solution. We look forward to receiving the requested information.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorApp1_974c89a5.zip

[Sandip Mane]

Thanks Prasanth. Really appreciate your effort. And sorry, I was off work for last few days and hence could not check your answer. 

But, I am not able to run your zip file since it uses net9.0, whereas I use net8.0. I tried converting project to net8.0, but keep getting some runtime errors.

Can you please convert same project to net8.0, syncfusion 26.2.8 and reshare. Thanks.

[Prasanth Madhaiyan]

Hi Sandip Mane,

Based on the shared details, we have prepared a Blazor Dashboard component sample using a .NET 8.0 Blazor application with the specified package version 26.2.8.

For your reference, we have attached the sample as a ZIP file. Please check the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorSample_35917bde.zip

[Sandip Mane]

Hi Prasanth,

Yes, your sample code is working and bottom panel is not overlapping.

I also managed to solve responsive layout issue with combination of -

1. MediaQuery="max-width:300px" for SfDashboardLayout , effectively disabling default responsive behavour of dashboard panels
2. CellAspectRatio for SfDashboardLayout  to control height of panels for small device
3. further fine tuning by getting device width using Javascript code, and then using that width to dynamically change number of records in a grid by setting GridPageSettings PageSize value (if else condition using width)

Thanks you very much for your patience and support in answering my questions.

[Prasanth Madhaiyan]

Hi Sandip Mane,

Glad to know that the solution provided helped. Please get back to us for assistance in the future.

Regards,

Prasanth Madhaiyan.