Panel to remain one line in height

[Peter]

I'm evaluating the use of the SfDashboardLayout Blazor component.  My requirement is the height of the the ContentTemplate should only ever be sufficient for one line of text.  If the page containing the SfDashboardLayout is resized, I want the panels to adjust in width but not height.  How can I do that?

My knowledge of HTML/CSS is limited.  I've played with various CellAspectRatio values but, because it's a ratio, I can find no way of ensuring the SfDashboardLayoutis is only resized horizontally and not vertically.

Your help would be appreciated.  My text code is shown below:

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs


@*<div class="col-lg-8 control-section">*@
    <div class="content-wrapper" style="max-width: 100%">
        <SfDashboardLayout @ref="dashboardObject" AllowDragging="false" AllowResizing="false" AllowFloating="false" CellSpacing="@CellSpacing" Columns="6" ShowGridLines="true" CellAspectRatio="2">
            <DashboardLayoutPanels>
                <DashboardLayoutPanel Id="1" Row="0" Column="0" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Phone</div></HeaderTemplate>
                    <ContentTemplate>@phoneField</ContentTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="2" Row="0" Column="1" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Queue time</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="3" Row="0" Column="2" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Queue</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="4" Row="0" Column="3" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Svc</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="5" Row="0" Column="4" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Last contact</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="6" Row="0" Column="5" SizeX="1" SizeY="1">
                    <HeaderTemplate><div>Display Treatment</div></HeaderTemplate>
                </DashboardLayoutPanel>

                <DashboardLayoutPanel Id="7" Row="1" Column="0" SizeX="2" SizeY="1">
                    <HeaderTemplate><div>@FlexPanel1Header</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="8" Row="1" Column="2" SizeX="2" SizeY="1">
                    <HeaderTemplate><div>@FlexPanel2Header</div></HeaderTemplate>
                </DashboardLayoutPanel>
                <DashboardLayoutPanel Id="9" Row="1" Column="4" SizeX="2" SizeY="1">
                    <HeaderTemplate><div>@FlexPanel3Header</div></HeaderTemplate>
                </DashboardLayoutPanel>

            </DashboardLayoutPanels>
        </SfDashboardLayout>
    </div>
@*</div>*@

<style>
    /*Panel header */
    .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
        color: #754131;
        background-color: #c9e2f7;
        text-align: left;
        font-size: smaller;
        padding-left: 20px;        
    }

    /*Panel content */
    .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
        background-color: #c9e2f7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;

        /* Truncate values in a panel*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

   /* Panel background */
    .e-dashboardlayout.e-control.e-responsive {
        background: white;
    }
</style>

[Muthukumar Settu]

Hi Peter, 

 

Greetings from Syncfusion support.  

  

On resizing the browser window, width and height of the DashboardLayout panel(same width and height is set for each panel) will decreases to adapt to the current screen dimension. Currently, we have no support to maintain the same height for the dashboard panels on window resize.  

  

However, We have considered your request as a improvement feature in DashboardLayout component. Support for this feature will be included in any one of our upcoming releases. Generally, we will plan any feature implementation based on customer request count, feature rank and wishlist plan for some feature.  

  

Please, track the following feedback link to know the status of this feature implementation. 

 

https://www.syncfusion.com/feedback/21390/fixed-height-for-dashboardlayout-component-when-resize-window 

 

Please let us know, if you need any further assistance. 

 

Regards,
Muthukumar S