multiselcect height

[Sarah]

Hi,

I have designed a component in Blazor. Within this component, I can call other components. The issue is that when I use your multiselect component and the number of items selected by the user increases, causing the height of the multiselect to grow, unfortunately, the height of my component does not increase. I do not have this problem with other components. I have attached the source code of my component.

 <InputByHeaderComponent Title="mytitle" ColSize="12">

     <SfMultiSelect @bind-Value="@lstproduct" TValue="List<int>"

                    TItem="ClsNameId" Mode="@VisualMode.Box"

                      DataSource="@lstProducts"

                    AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                    IgnoreAccent="true" IgnoreCase="true">

         <MultiSelectFieldSettings Text="@nameof(ClsNameId.Name)" Value="@nameof(ClsNameId.Id)"></MultiSelectFieldSettings>

     </SfMultiSelect>

 </InputByHeaderComponent>

Attachment: InputByHeaderComponent_21d1e6c.zip

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Sarah, 

 

 

Thank you for sharing the details. The behavior you observed occurs because the MultiSelect in Box mode dynamically increases its height as more items are selected. By default, this can cause the control to expand beyond the intended layout. To maintain a consistent height and prevent layout issues, you can apply a custom CssClass to the MultiSelect and explicitly set a max-height along with overflow-y:auto. This ensures that once the content exceeds the specified height, a scrollbar appears instead of stretching the component.

 

Here’s a sample implementation:

@page "/multiselect-sample"

@using Syncfusion.Blazor.DropDowns

 

<PageTitle>MultiSelect Sample</PageTitle>

 

<InputByHeaderComponent Title="mytitle" ColSize="12">

    <SfMultiSelect @bind-Value="@lstproduct"

                   TValue="List<int>"

                   TItem="ClsNameId"

                   Mode="@VisualMode.Box"

                   DataSource="@lstProducts"

                   AllowFiltering="true"

                   FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                   IgnoreAccent="true"

                   IgnoreCase="true"

                   CssClass="fixed-height-multiselect">

 

        <MultiSelectFieldSettings Text="@nameof(ClsNameId.Name)"

                                  Value="@nameof(ClsNameId.Id)">

        </MultiSelectFieldSettings>

 

    </SfMultiSelect>

 

</InputByHeaderComponent>

 

@code {

    public class ClsNameId

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

 

    private List<int> lstproduct = new List<int>();

 

    private List<ClsNameId> lstProducts = Enumerable.Range(1, 30)

        .Select(i => new ClsNameId { Id = i, Name = $"Item {i}" })

        .ToList();

}

 

<style>

.fixed-height-multiselect{

    max-height: 60px;  

    overflow-y: auto;    

}

 

</style>

 

 

In this:

• max-height:60px restricts the control’s height.

• overflow-y:auto introduces a vertical scrollbar when the selected items exceed the height limit.

 

For your convenience, we’ve also attached a runnable sample and a GIF demonstration so you can see the behavior in action and apply the same fix in your project.

 

Sample: https://blazorplayground.syncfusion.com/embed/LDryCBZkpeapkWfV?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

Gif:

 

 

 

Regards,

K N Siddartha.