Is there a way to auto adjust the height of the dashboard layout panels to the height of the content?
I want to have the panel heights auto-adjust to the contents when the screen resolution changes.
Hi Nick,
Greetings from Syncfusion support.
By default, the panel along with its content will auto adjust during window resize based on the panel configurations such as row, column and columns value assigned to it. We have prepared a sample and attached it here for your reference.
If we have misunderstood, please clarify whether you are using any other components within panel ? If so, then you can invoke the refresh method for nested components to adapt to panel size during resize. Also, we have a responsive support, where panels within the layout get adjusted based on their parent element’s dimensions to accommodate any resolution.
Refer to the following UG link.
https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment: DashboardAutoAdjust_bd791935.zip
I am using a datagrid inside a panel and when the screen resolution changes and the layout becomes stacked, the grid extends out of the panel.
Hi Nick,
We have modified the Dashboard Layout sample with DataGrid inside of the panel. To fit any component inside the content, you need to set the height and width property of that component container as 100%. Just by customizing the height and width you can make any component to fit inside the Dashboard Layout panel.
Check the below code snippet.
|
[index.razor] <ContentTemplate> <SfGrid DataSource="@Orders" Height="100%" Width="100%" /> </ContentTemplate> |
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment: DashboardAutoAdjust_28bd53a2.zip
I have other elements inside the ContentTemplate alongside Grid, etc. How would the height auto-adjust work in this scenario?
I have attached a sample that is similar to what I have.
Attachment: DashboardAutoAdjust_dcec281d.zip
Hi Nick,
To fit any component inside the Dashboard panel, we suggest you to set Height and Width properties as 100% for both the parent container and the component. Since in your shared sample the Grid component container starts half way on the panel height, we suggest you to set the container height as a calculated value to overcome the adjustment issue.
Check the below code snippet.
|
[index.razor] <ContentTemplate> <div class="e-container"> <div style="height:100%;width:100%"> <div style="padding: 10px; text-align: center; vertical-align: middle;"> <SfTextBox Placeholder="Enter Order No"></SfTextBox> </div> <div style="padding: 10px; text-align: center; vertical-align: middle; "> <Syncfusion.Blazor.Buttons.SfButton>Enter</Syncfusion.Blazor.Buttons.SfButton> </div> <div style="padding: 10px; height: calc(100% - 35%); width: 100%;"> <SfGrid DataSource="@Orders" … Height="100%" Width="100%"> </SfGrid> </div> </div> </div> </ContentTemplate>
<style> .e-container { width: 100%; height: 100%; } </style> |
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment: DashboardAutoAdjust_f3930ab9.zip
This works in some cases but not always. Is there a way to add a vertical scrollbar if the height extends beyond the layout panel height?
Hi Nick,
To meet your requirement, we have made some changes in our shared sample. By setting the overflow CSS property to “Auto” for the panel container, you can enable the scrollbar based on the overflow.
Check the below code snippet for your reference.
|
[index.razor] .e-container { width: 100%; height: 100%; overflow:auto; } |
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
- 7 Replies
- 2 Participants
-
NI Nick
- May 9, 2022 02:17 PM UTC
- May 19, 2022 10:24 AM UTC
