I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>
I'm currently trying it with this approach but I'm wondering if there's a better way:
The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered. In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.
2 Answers, 1 is accepted
Hi Vincent,
You can define the height prop of the DropDownList as 'auto' as demonstrated below:
<kendo-dropdownlist
:data-source="dataSource"
:data-text-field="'name'"
:data-value-field="'id'"
:filter="'contains'"
:height="'auto'"
:open="adjustDropDownHeight"
>
</kendo-dropdownlist>Here is a StackBlitz example that uses the project you shared and the mentioned above change.
Regards,
Petar
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.
Rank 3
Iron
Iron
Iron
I'm guessing this warning can't hurt much right? Or are there plans for DropDownList wrapper to support height auto prop?
Hi Vincent,
The warning won't break the implementation of your application. When you build the application for production, it won't appear anymore.
As per your request about the height "auto" prop, currently, such a scenario is not in our plans. The reason why is that, our efforts are focused on the development of our Native components.
Saying the above, the Native DropDownList supports the "auto" height for its popup. Here is a StackBlitz example demonstrating my words.
I would recommend using the Native DropDownList instead of the Wrapper one.
Rank 3
Iron
Iron
Iron
Rank 1
Iron
Iron
Hi, Filembar.
Yes, you can define the height of the popup of the Native DropDownList using its height property.
Here is an example in which the popup height is set to 400px.