How to manage "Kendo react drop-down list item (k-item)" width for short and long text content?

Question

This is regarding to KendoReact Dropdowns
https://www.telerik.com/kendo-react-ui/components/dropdowns/

How to increase "k-item" width to match the content width and also, stop text wrapping when it's comes to long text content? Also how to keep "k-item" width as "drop-down list (k-list)" width when it's come to short text content at the same time?

I have two dropdowns with long list items and short list items, but What it looks like when it added to my project.

So I have added "width:auto" for the "k-list" popup setting and this was happend.

But what I need is like this.

I need your help to make it looks like the above image.

Answer 1

There is a popupSettings property on the dropdowns. If you don't touch it, the items will match the width of the box. If you want the items to be longer or shorter than the box, you can set a width. Here's an example: popupSettings={{ width: "250px" }}

Answer 2

Almost 3 years later and I have just faced exactly the same issue as in this question LOL. Here is how I solved it:

1. In index.html, add a div like the following under the body element. This will be the container of the DropDownLists' popup:

2. Add the following attributes to the DropDownList component.

3. onDropDownOpen function goes as follows:

A few notes here:

1. event.target.base.popupWidth will carry the width of the dropdown trigger element at the moment it is opened.
2. That is then set as the minWidth of the popup so it will never shrink down below the width of the dropdown's trigger element
3. Finally I set the width of the popup as 'auto' so it grows for wider dropdown options.
4. setTimeout was necessary because it needs to wait until dropdown list elements are inserted under the popup container, since we don't have an "onOpened" event.
5. Never set the width in the DropDownList's popupSettings or the solution above will not work!