Hello,
I want to remove white space in drop down values in blazor. Please see the image below.
Could please suggest on this
5 Answers, 1 is accepted
Could you please help on this.
Thanks
Vishnu Vardhanan
Hi Vishnu,
The DropDownList has a PopupHeight parameter which controls the height of the expanded dropdown list element. If you set its value to "auto", the Popup will have the necessary height to display its items properly without the white space (see the below snippet for reference).
<TelerikDropDownList Data="@myDdlData"
PopupHeight="auto"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="selectedValue"
DefaultText="Select item">
</TelerikDropDownList>
@code {
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
int selectedValue { get; set; }
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 3).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
This feature will work just fine if you are providing a small data list to the DropDownList. In case you want to display a large portion of options in the DropDownList, the Popup container might expand beyond the page as there is no MaxPopupHeight set.
We have an opened feature request for MaxPopupHeight in our public feedback portal that you may vote for and follow in case that is something you might need in the future.
Another option to customize the Popup container is to use the PopupClass parameter of the DropDownList and provide additional CSS class to style the appearance of the DropDownList's dropdown.
Regards,
Nadezhda
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
If you're looking at this post now it seems as if the accepted answer no longer works.
Go to the documentation here: https://docs.telerik.com/blazor-ui/components/dropdownlist/overview
Scroll for the section on popup settings and you'll get what you're looking for.
Hi W. Bryant,
Thank you for pointing this out! Indeed, as of Telerik UI for Blazor 3.0.0, we've extracted the popup configuration in a dedicated Popup settings tag including multiple options.
The height of the popup should now be set as follows:
<TelerikDropDownList>
<DropDownListSettings>
<DropDownListPopupSettings Height="..." />
</DropDownListSettings>
</TelerikDropDownList>
Regards,
Nadezhda Tacheva
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
This doesn't really help. Specifying "auto" should fit the popup BOTH minimum height and maximum height so that the popup does not extend below the bottom of its parent container. Currently if there are many items in the popup, setting "auto" for the height extends the popup below the bottom of its container so that items are not visible and also there is no scroll bar, so the popup is totally unusable!! If there are a few items in the popup and "auto" is specified, a bunch of empty rows are placed at the bottom of the popup for some reason?! This is UX 101, so please put a fix in for this!