No Data Text Missing in DropDownList Popup
Environment
| Product | DropDownList for Blazor, AutoComplete for Blazor, MultiSelect for Blazor, ComboBox for Blazor, MultiColumnComboBox for Blazor |
Description
When the dropdown is smaller than the default min-height of the no data template, the "No Data" text is not visible.
Cause
The default min-height of the .k-nodata class is 140px. The default height of the dropdown is 200px. If the Height or MaxHeight of the dropdown is equal to or smaller than 100px, the "No Data" text is not visible.
Solution
You need to change the default minimum height of the popup element. The DropDownList popup setting Class lets you define a CSS class. The defined rules from the CSS will change the appearance and properties of the popup element. With the CSS rule min-height: auto the popup element's height is flexible and adjusts dynamically based on its content.
Use a Class to set the min-height of the .k-nodata class to auto.
<div>
Popup with Height:
<TelerikDropDownList @bind-Value="@SelectedValue"
Data="@Countries"
Filterable="true">
<DropDownListSettings>
<DropDownListPopupSettings Height="100px" Class="no-data-min-height"></DropDownListPopupSettings>
</DropDownListSettings>
</TelerikDropDownList>
</div>
<div>
Popup with MaxHeight:
<TelerikDropDownList @bind-Value="@SelectedValue"
Data="@Countries"
Filterable="true">
<DropDownListSettings>
<DropDownListPopupSettings MaxHeight="100px" Class="no-data-min-height"></DropDownListPopupSettings>
</DropDownListSettings>
</TelerikDropDownList>
</div>
<style>
.no-data-min-height .k-nodata {
min-height: auto;
}
</style>
@code {
private string SelectedValue { get; set; } = "Austria";
private List<string> Countries = new List<string>()
{
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
};
}