DropDown popup width (Telerik: Kendo UI for Angular)

kendo-ui-angular2

Solution

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

Problem

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 }; } ```

Original source