DropDown 弹出窗口宽度（Telerik：Kendo UI for Angular）

Question

如何将 DropDown 弹出宽度设置为自动，以便所有文本都可见？我想为小部件保留较小的宽度，但为弹出窗口保留较大的宽度。

更新：

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

我建议您将 popup width 设置为 auto。因此项目不会换行：

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

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

DropDown 弹出窗口宽度（Telerik：Kendo UI for Angular）

DropDown popup width (Telerik: Kendo UI for Angular)

kendo-ui-angular2