DropDown彈出窗口寬度（Telerik：Angular的Kendo UI）

Question

如何將DropDown彈出窗口寬度設置爲auto，以便所有文本都可見？我想保留小部件的寬度，但彈出的寬度較大。

更新時間：

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

我建議你設置popup width爲auto。因此，該項目將不換行：

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

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