New to Telerik UI for Blazor? Download free 30-day trial

No Data Text Missing in DropDownList Popup


Product DropDownList for Blazor,
AutoComplete for Blazor,
MultiSelect for Blazor,
ComboBox for Blazor,
MultiColumnComboBox for Blazor


When the dropdown is smaller than the default min-height of the no data template, the "No Data" text is not visible.


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.


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.

    Popup with Height:
    <TelerikDropDownList @bind-Value="@SelectedValue"
            <DropDownListPopupSettings Height="100px" Class="no-data-min-height"></DropDownListPopupSettings>

    Popup with MaxHeight:
    <TelerikDropDownList @bind-Value="@SelectedValue"
            <DropDownListPopupSettings MaxHeight="100px" Class="no-data-min-height"></DropDownListPopupSettings>

    .no-data-min-height .k-nodata {
        min-height: auto;

@code {
    private string SelectedValue { get; set; } = "Austria";

    private List<string> Countries = new List<string>()
        "Bosnia & Herzegovina",
        "Czech Republic",
        "San Marino",
        "United Kingdom",
        "Vatican City"

See Also

Override Theme Styles

In this article