List elements overflow when "SelectAll" is activated

[Henning Krause]

Hey, 

there is an issue with the SfListBox component. If the scroll and checkbox (including check all) are activated according to your documentation, the listbox elements overflow (see images below). 

Here's the code to reproduce:

@using Syncfusion.Blazor.DropDowns

<SfListBox TValue="string[]" DataSource="@Vehicles" Height="200px" TItem="VehicleData">
    <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true"></ListBoxSelectionSettings>
    <ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>

@code {
    public List<VehicleData> Vehicles = new List<VehicleData> {
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
        new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
        new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
    };
    public class VehicleData
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }
}

Can you fix this issue?

Best regards

[Thaneegairaj Sankar]

Hi Henning, 

 

We have already resolved your issue in source side, and it will be available in our Essential studio volume 4 SP release, which is scheduled to be rolled out on the 1^st week of February 2022 

 

And We can be able to resolve your issue on sample level by using CSS height property. Please check the below code snippet and custom sample. 

 

Code snippet: 

 

<style> 

  

.e-listbox-container .e-list-parent { 

    height: 80%; 

} 

  

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Listbox-874427674 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Thaneegairaj S