更改 Kendo 中 Angular 的下拉弹出窗口高度

Question

在这个 StackBliz 中，我有一个 Kendo for Angular 下拉列表。当您打开下拉菜单时，弹出窗口会显示七个项目。我只想展示三个项目。所以我将

popupSettings

中的高度设置为 30，但 Kendo 忽略了它。如何更改弹出窗口的高度？

@Component({
  selector: 'my-app',
  template: `
      <kendo-dropdownlist 
         [data]="listItems"
         [popupSettings]="{
            width: 100,
            height: 30 }">
      </kendo-dropdownlist>
  `
})
export class AppComponent {
    public listItems: Array<string> = [];

    ngOnInit(){
         for(var i=1;i<=100;i++)
            this.listItems.push('Item ' + i);
    }

}

Answer 1

如果您可以检查浏览器上的元素，您将看到 Kendo 为下拉列表生成

div

。

<div unselectable="on" class="k-list-scroller" style="max-height: 200px;">

更改班级的

max-height

k-list-scroller

Answer 2

我在这里找到了答案。 您必须设置 listHeight

属性。

<kendo-dropdownlist 
    [data]="listItems"
    [popupSettings]="{
        width: 100,
        height: 30 }" 
    [listHeight]="500">
</kendo-dropdownlist>

Answer 3

如果弹出窗口没有数据，则表示 Kendo 使用的是

no data

 弹出窗口的样式。在这种情况下，上述解决方案可能不起作用。

要更改没有数据的弹出窗口的高度，请使用以下任何方法，

    .k-no-data {
     min-height: auto
    }

或者，

.k-no-data {
  min-height: 100px
 }