DropDown popup width (Telerik: Kendo UI for Angular)

Question

How can I set DropDown popup width to auto, so all text is visible? I would like to keep small width for widget, but larger width for popup.

Updated:

Link to Plunkr.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: ['kendo-dropdownlist { width: 6em;}'],
  template: `
    <kendo-dropdownlist
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
    >
        <ng-template kendoDropDownListValueTemplate let-dataItem>
            <span>{{ dataItem?.value }}</span>&nbsp;{{ dataItem?.text }}
        </ng-template>
        <ng-template kendoDropDownListItemTemplate let-dataItem>
            <span>{{ dataItem.value }}</span> {{ dataItem.text }} - Dummy text
        </ng-template>
    </kendo-dropdownlist>
  `
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: { text: string, value: number } = { text: "Foo", value: 1 };
}

Answer 1

I would suggest you to set the popup width to auto. Thus the items will not wrap:

<kendo-dropdownlist
    [data]="listItems"
    [textField]="'text'"
    [valueField]="'value'"
    [value]="selectedValue"
    [popupSettings]="{ width: 'auto' }"
>

http://plnkr.co/edit/dqlInPutekCnwdt7KFek?p=preview