Mobile Panel Height in ASP.NET CORE Dashboard Layout

25 Aug 20264 minutes to read

The Dashboard Layout component supports responsive mobile layout through the mediaQuery property. However, in mobile view, all panels use a uniform height calculation based on the sizeY property. The mobilePanelHeight property allows specifying a custom height for individual panels in mobile view, enabling better optimization of responsive layouts.

The table below lists the new panel property and its functionality.

Property	Description
mobilePanelHeight	Specifies the height of the panel in cells count for mobile view only. When set, this height overrides the default sizeY value. If null or undefined, falls back to sizeY.

Setting mobile panel height

The mobilePanelHeight property allows defining a mobile-specific height for each panel in cells count. This property is applied only when the component is in mobile view (based on the mediaQuery condition).

Previously, panel heights in mobile view were calculated uniformly based on the viewport width, where all panels adhered to a fixed range from 0 to 1 in the calculation algorithm. The mobilePanelHeight property introduces decimal value support for more granular control over panel heights. Just as panel width adapts to the viewport, height can now be adjusted using decimal increments (e.g., 0.5, 1.5, 2.7) in addition to whole numbers, enabling independent height customization.

This helps:

• Reduce unnecessary whitespace in mobile layouts.
• Improve screen space utilization on smaller devices.
• Enhance the user experience by displaying more relevant content within the viewport without excessive scrolling.
• Independently control panel height without relying on the desktop sizeY configuration.

For panels without mobilePanelHeight defined, the sizeY value is used as the default height in mobile view. The mobilePanelHeight property is independent of the minSizeY and maxSizeY constraints, which apply only to the desktop view.

The following sample demonstrates setting custom heights for panels in mobile view.

CSHTML

@{
    ...
    panelCellSpacingModel modelValue = new panelCellSpacingModel();
    modelValue.cellSpacing = new double[] { 20, 20 };
}


<div>
    <!--  Dashboardlayout element declaration -->
    <ejs-dashboardlayout id="dashboard_default" columns="5" cellSpacing="@modelValue.cellSpacing" mediaQuery="max-width: 700px">
        <e-dashboardlayout-panels>
            <e-dashboardlayout-panel id="Panel0" sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>" mobilePanelHeight="0.25">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel id="Panel1" sizeX="1" sizeY="1" row="0" col="1" content="<div class='content'>1</div>" mobilePanelHeight="0.5">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel id="Panel2" sizeX="1" sizeY="1" row="1" col="0" content="<div class='content'>2</div>" mobilePanelHeight="0.75">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel id="Panel3" sizeX="1" sizeY="1" row="2" col="0" content="<div class='content'>3</div>" mobilePanelHeight="1">
            </e-dashboardlayout-panel>
        </e-dashboardlayout-panels>
    </ejs-dashboardlayout>
</div>
<!-- end of dashboardlayout element -->
<style>
    /* DashboardLayout element styles  */
    #dashboard_default .e-panel .e-panel-container .content {
        font-weight: 600;
        text-align: center;
        padding: 5px;
        line-height: 100%;
    }

    .e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
        color: rgba(0, 0, 0, 0.61);
    }

    .e-dashboard-layout.e-control .e-panel:hover {
        border: 0px;
    }

    .e-dashboard-layout.e-control .e-panel .e-panel-header {
        font-size: 15px;
        font-weight: 500;
        height: 37px;
        padding: 10px;
        vertical-align: middle;
        border-bottom: 0.5px solid rgba(0, 0, 0, .125);
    }
</style>

CSHTML.cs

public class panelCellSpacingModel
  {
      public double[]? cellSpacing { get; set; }
  }