the component inserted in the body of DashboardLayoutPanel exceeds the allocated space

[Salvatore]

Hi, If I insert only one control as a SfGrid the problem does not occur but if in addition to the Grid component I insert a simple button then the space dedicated to the button causes the space assigned to the DashboardLayoutPanel / Body to be exceeded. The problem with some complex components also occurs in width.

How can I fix this?

following an example of my component

<div class="mt-2">
    <div class="row align-items-center">
        <SfButton CssClass="e-outline mx-2" IconCss=" e-icons e-exportxls-icon" IconPosition="IconPosition.Right" @onclick="OnExportXls">Export Xls</SfButton>
        <SfButton CssClass="e-outline mx-1" IconCss=" e-icons e-exportpdf-icon" IconPosition="IconPosition.Right" @onclick="OnExportPdf">Export Pdf</SfButton>
        <div class="d-inline-flex mx-sm-2">
            <SfDateRangePicker StartDate="@StartValue" EndDate="@EndValue" Placeholder="Choose a Range">
                <DateRangePickerEvents ValueChange="OnChangeHandler"></DateRangePickerEvents>
            </SfDateRangePicker>
        </div>
 
        <div class="mx-1">
            <div class="row align-items-center">
                <div class="col-sm-auto">
                    <label class="label-form">Record per pagina</label>
                </div>
                <div class="col-sm">
                    <SfDropDownList TValue="int" TItem="DropdownFields" Width="70px" @bind-Value="@RecordsForPage"
                                    DataSource="@ItemsForPage" FloatLabelType="@FloatLabelType.Never">
                        <DropDownListFieldSettings Value="Id" Text="Text"></DropDownListFieldSettings>
                        <DropDownListEvents TValue="int" TItem="DropdownFields" OnValueSelect="@OnSelect"></DropDownListEvents>
                    </SfDropDownList>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-2">
        <SfGrid @ref="DefaultGrid" DataSource="@Logs" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true"
                AllowPdfExport="true" AllowExcelExport="true">
            <GridEvents QueryCellInfo="QueryCellInfoHandler" TValue="Log"></GridEvents>
            <GridPageSettings PageSize="@RecordsForPage"></GridPageSettings>
            <GridColumns>
                <GridColumn Field=@nameof(Log.UeLogsPk) HeaderText="ID" TextAlign="TextAlign.Center" Width="120" Visible="false"></GridColumn>
                <GridColumn Field=@nameof(Log.UeLogLevelFk) HeaderText="Level" Width="150"></GridColumn>
                <GridColumn Field=@nameof(Log.UeLogsCalendar) HeaderText="Date" Format="dd/MM/yyyy HH:mm:ss.fff" Type="ColumnType.DateTime" Width="150"></GridColumn>
                <GridColumn Field=@nameof(Log.UeLogsMessage) HeaderText="Message" TextAlign="TextAlign.Left" Width="300"></GridColumn>
                <GridColumn Field=@nameof(Log.UeLogsSender) HeaderText="Sender" TextAlign="TextAlign.Center" Width="120"></GridColumn>
            </GridColumns>
        </SfGrid>
    </div>
</div>

and for DashboardLayoutPanel

<DashboardLayoutPanel Id="PanelLog" SizeX="6" SizeY="2" Col="0" Row="1">
    <HeaderTemplate><div class='header'> Logs </div></HeaderTemplate>
    <ContentTemplate>
        <LogsContent DayRange="1"></LogsContent>
    </ContentTemplate>
</DashboardLayoutPanel>

[Sowmiya Padmanaban]

Hi Salvatore,  

 

Greetings from Syncfusion support. 

 

In DashboardLayout component, we have not handled the content of dashboard panels in our component side. Because content element may vary (Chart, grid, Button) based on different user. 

 

We have added “e-panel-content” class for dashboard panels content.  By setting the overflow as auto for “e-panel-content” element, panel content element does not exceed the height of the corresponding panel. Or else you configure the dashboard panel to the maximum height needed using set SizeY property on initialization. 

 

Please, refer the below code snippet. 

 

<style> 

    .e-panel-content { 

        overflow:auto; 

    } 

</style> 

 

Please, refer the sample link. 

 

https://www.syncfusion.com/downloads/support/forum/159934/ze/Dashboard-367691471.zip 

 

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

 

Regards,  

Sowmiya.P 

[Salvatore]

Hello, Greetings for Christmas..

By setting the recommended option, the space is respected but when scrolling, the panel header also scrolls upwards. Also, if you insert a grid the whole grid scrolls while I would like both the panel header and the grid header to stay still.

Waiting Greetings

I am using version 18.4.0.30

[Sowmiya Padmanaban]

Hi Salvatore,  

 

We have checked your reported issue with DashboardLayout component. But the panel header is not scrolled upwards when scroll the content of DashboardLayout component. 

 

Please, refer the below code snippet. 

 

<style> 

    .e-panel-content { 

        height: calc(100% - 35px); 

        overflow: auto; 

    } 

</style> 

 

Please, refer the below link. 

 

https://www.syncfusion.com/downloads/support/forum/159934/ze/Dashboard1965774648.zip 

 

Could you please share us the video footage of your reported problem or else replicate the issue in attached sample. It will be helpful for us to resolve your issue at the earliest. 

 

Grid Requirement: 

 

Could you please share the screenshot/ video footage of your requirement? 

 

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

 

Regards,  

Sowmiya.P