Cannot Set Height of RadzenListBox

Radzen.Blazor Components
1

I cannot seem to limit the height of the RadzenListBox. Here is a simple setup. I want to limit the size of the list to the height of the div.

    <RadzenRow Gap="1rem" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Start">
        <RadzenColumn class="rz-text-align-left" Size="2">
            <div style="max-height:200px">
                <RadzenListBox FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowFiltering="true"
                    AllowClear="true" TValue="SecurityGroup" Value="@selectedSecurityGroup" Change="SelectedSecurityGroupChanged" Data="@securityGroups"
                    Style="width:100%;height:100%" ValueProperty="SecurityGroupId" TextProperty="Name"></RadzenListBox>
            </div>
        </RadzenColumn>
    </RadzenRow>

Can you please help?

2

Hi @MBonafe,

One way is to set max-height to the ListBox as well.

If you still want to keep the div and make the ListBox resize to the height of the div you'd need to use the flexbox model:

<div class="rz-display-flex" style="max-height:200px">
    <RadzenListBox FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowFiltering="true"
        AllowClear="true" TValue="SecurityGroup" Value="@selectedSecurityGroup" Change="SelectedSecurityGroupChanged" Data="@securityGroups"
        Style="width:100%;" ValueProperty="SecurityGroupId" TextProperty="Name"></RadzenListBox>
</div>
1 Like
3

Thanks. Your example doesn't have max-height set, but it did work. I thought sure I had tried that already.