Unplanned
Last Updated: 26 Jun 2021 15:27 by ADMIN
Marcel
Created on: 10 Jun 2019 20:54
Category: DropDownList
Type: Feature Request
16
MaxPopupHeight

Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.

But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.

 

My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.

Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.

4 comments
ADMIN
Marin Bratanov
Posted on: 26 Jun 2021 15:27

Hello,

Here is a basic example that illustrates my previous point:

<style>
    .limited-height {
        max-height: 100px;
    }
</style>

Selected value: @selectedValue
<br />

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
                     PopupHeight="" PopupClass="limited-height">
</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; }

    //Define a preselected value when the component initializes
    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}

 

Regards,
Marin Bratanov
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/.

n/a
Posted on: 25 Jun 2021 19:58
Can you explain how to use this with CSS.  We have alot of DropDownLists in our app and I would like to consolidate this into CSS. Thanks
ADMIN
Marin Bratanov
Posted on: 01 Mar 2021 17:26

Hi all,

This is now possible through CSS and the PopupClass parameter - you can set the max-height of the dropdown element with a CSS rule now, even while using PopupHeight (e.g., PopupHeight="auto").

 

Regards,
Marin Bratanov
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/.

ADMIN
Marin Bratanov
Posted on: 11 Jun 2019 12:05
Hi Marcel,

Thank you for the ideas.

I modified the title to make it clearer. I also created a separate item for changing the default behavior of the PopupHeight property and you can Follow it here: https://feedback.telerik.com/blazor/1412736-popupheight-to-default-to-auto.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor