Hi,
I have a child component within a page. This component is hidden or visible as required, and I've set it up to be responsive such that the three columns eventually show vertically.
All this works fine.
In the parent component however, when the screen size is shrunk, the child component responds as I would expect and so expands vertically, but other fields on the parent page do not move down to make room for it, and so everthing overlaps.
Is there a way to handle this?
Cheers
Reg
Hi @SolutionJ,
I am afraid I don't understand much from your question. What did you implement as in code? What happens now (a screenshot would help)? What do you want to happen?
This is the page in default mode. The child component I referred to is currently not visible. The datagrid shown is a separate child component.
I've now clicked the ADVANCED SEARCH button, and the screen now looks as follows:
The datagrid component has moved down the page to make room for the advanced search component. This is all working exactly as required.
Now I start to make the screen smaller...
The advanced search component Date Range, From and To columns have been set to resize as the screen shrinks, and they're doing it, eventually ending up in a vertical arrangement as shown, but the other fields on the child component - the Active / Inactive panel and the APPLY / RESET button row, have not moved down and so are overlapping.
Here is the code for the advanced search component.
<RadzenStack Style="margin-left: auto; margin-right: auto; text-align: left; max-width: 1200px; margin-bottom: 10px" Orientation="Radzen.Orientation.Vertical"
Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.Normal">
<RadzenRow Style="height: calc(100vh-300px)">
<RadzenColumn SizeXX="11" SizeXL="11" SizeLG="11" SizeMD="10" SizeSM="7" SizeXS="4" Style="width: auto">
<RadzenRow Style="width: 859px; height: 63px">
<RadzenColumn SizeSM="4" SizeXS="2" SizeMD="4" SizeLG="4" SizeXL="4" SizeXX="4">
<RadzenLabel Text="Date Range" />
<RadzenDropDown AllowSelectAll="false" Data="@dateRanges" Change="@DropDown0Change" Name="DateRange" @bind-Value="@_value" Style="width: 190px; height: 39px" />
</RadzenColumn>
<RadzenColumn Style="width: 206px; height: 63px" SizeXS="2" SizeSM="3" SizeMD="3" SizeLG="3" SizeXL="3" SizeXX="3">
<RadzenLabel Text="From" />
<RadzenDatePicker TValue="dynamic" Name="FromDate" Value="@fromDate" DateFormat="dd/MM/yy" Style="width: 150px; height: 39px" />
</RadzenColumn>
<RadzenColumn SizeXS="2" SizeSM="4" SizeMD="4" SizeLG="4" SizeXL="4" SizeXX="4">
<RadzenLabel Text="To" />
<RadzenDatePicker TValue="dynamic" Name="ToDate" Value="@toDate" Style="width: 150px; height: 39px" DateFormat="dd/MM/yy" />
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
I would ideally want the height of the advanced search component in the last screenshot to have been increased so that none of the controls on it overlap.
Cheers
Reg
You can try removing the height:
<RadzenRow Style="height: calc(100vh-300px)">
Good morning,
Unfortunately, that has had no effect.
Many thanks
Reg
The visual behavior you see happens when something is absolutely position. Do you have such elements? Also is there any way to see this behavior live? It is a bit hard to guess what happens just from the screenshot alone. Also the provided code doesn't seem complete - the buttons and switches are missing.
I have found it. In the Child Component, the row containing the panel / controls had a fixed height setting.
Many thanks
Reg
PS I am enjoying the product. The Visual Studio plugin sounds like a great way to go, looking forward to trying that out...