How to make the size of selectBox options dropdown dynamic in devExtreme Angular

Question

How to make devExtreme selectBox dropdown window dynamically take the size of the longest option text without specifying static width in dropDownOptions attribute. E.g:

I also tried this but it didn't help: dropDownOptions: { width: 'max-content' }

Answer 1

I don't think this is possible out of the box. It will also look weird with pagination and scrolling I think, because the dropdown popup will change dimensions every time it loads new data.

My suggested solution is to keep the default width of the dropDownBox and enable the "wrapItemText". This will wrap exceeding text.

Like this: <dx-select-box [items]="simpleProducts" [wrapItemText]="true"></dx-select-box>

Alternatively it can be possible to manually calculate the width of the dropdown popup by iterating through the array, then get the record with the biggest content and calculate the width of the content and assign it to the width property of the dropDownOptions.

Note: If using a DataSource with an underlying store, You can achieve this by using the DataStore callback "onLoaded" and iterate through the result similar to the above solution to calculate the width.