How to set width of Kendo dropdown to widest option?

[Ankita]

How to set width of Kendo dropdown to widest option in Angular 2 component?

[Dimiter Topalov]

Hello Ankita,

By default the popup, holding the list of options, is as wide as the component. You can provide specific dimensions for the Popup via the popupSettings property:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/styling/

Providing an object with width property, set to 'auto' yields the desired behavior:

https://plnkr.co/edit/Fd5gRXMVcnIKJKS9cOWx?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ankita]

I want drop down list also wide enough to show text without wrapping and truncating. 

Popup setting works fine but drop down list doesn't. 

 

[Ankita]

I want dropdowl list to be wide enough when page load and do not change width after option is selected. 

[Dimiter Topalov]

Hi Ankita,

Thank you for further specifying the desired functionality. However, unfortunately it is not supported out-of-the-box, as the width of the Popup holding the list of options, cannot be known in advance when it is set to "auto". You can set the width of the component to "auto", but this will result in dynamically adjusting the width each time a different option (with different length) is selected.

The only possible workarounds involve implementing some custom logic for calculating the width of the widest string value and setting it on the component via the styles.width property. There are couple of possible solutions that come to mind:

1) Use a monospaced font and loop through the collection of data items, find the longest one, and calculate the width by multiplying it to a constant, depending on the specific font and font size

2) Render the another DropDownList component outside of the visible viewport (e.g. position: absolute, left: -1000px), open it programmatically via the toggle() method, access the Popup container's DOM element and its width, and set it to a field on the host component that is also bound to the visible DropDownList's style.width property.

I hope this helps, but if you have the time, please also submit a feature request to our UserVoice portal, describing the desired functionality, so we can consider introducing such an enhancement in a future version of our dropdowns package, based on the customer demand:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback?category_id=181402

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik