Best way to expand Kendo DropDownList to viewport height

2 Answers 455 Views
DropDownList wrapper
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Vincent asked on 30 Nov 2021, 01:25 PM

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:

1seoqu (forked) - StackBlitz

 

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

Sort by
2
Accepted
Petar
Telerik team
answered on 03 Dec 2021, 10:30 AM

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.

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 03 Dec 2021, 01:36 PM

Yeah I had already tried that approach, but it will unfortunately throw a console warning:



I'm guessing this warning can't hurt much right?  Or are there plans for DropDownList wrapper to support height auto prop?
Petar
Telerik team
commented on 03 Dec 2021, 03:23 PM

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.

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 03 Dec 2021, 03:27 PM

Thanks for your input, I'll definitely have a look at the native component 😊
0
Filembar
Top achievements
Rank 1
Iron
Iron
answered on 04 Feb 2022, 07:50 AM
Can i adjust the height of the kendo dropdown list window with this?
Petar
Telerik team
commented on 04 Feb 2022, 08:09 AM

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.

Tags
DropDownList wrapper
Asked by
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Petar
Telerik team
Filembar
Top achievements
Rank 1
Iron
Iron
Share this question
or