New to Kendo UI for Vue? Start a free 30-day trial
Auto-Resizing Kendo UI for Vue DropdownList to Fit Longest List Item
Environment
| Product Version | 6.4.0 |
| Product | Progress® Kendo UI for Vue DropDownList |
Description
When using the Kendo UI for Vue DropDownList, the width does not automatically adjust to fit the longest item in the list unless explicitly set. By default, the component renders with a fixed width based on its container or the initially selected value. This can result in long items being cut off before any selection is made.
This knowledge base article also answers the following questions:
- How can I make Kendo UI for Vue DropDownList auto-resize to fit the longest item?
- What is the workaround for clipping long items in Kendo UI for Vue DropDownList?
- How to programmatically set the width of Kendo UI for Vue DropDownList?
Solution
To ensure the Kendo UI for Vue DropDownList adjusts its width to fit the longest item from the start, calculate the width of the longest item in the list programmatically and set the style.width property of the component.
The following example showcases the described approach in action:
Change Theme
Theme
Loading ...