CODEWITHSUNDEEP
kendo-uikendo-ui-angular2
ps0604
ps0604

Reputation: 1071

Change dropdown popup height in Kendo for Angular

In this StackBliz I have a Kendo for Angular dropdown list. When you open the dropdown, the popup shows seven items. I just want to show three items. So I set the height in popupSettings to 30, but Kendo is ignoring it. How to change the popup height?

@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);
    }

}

Upvotes: 1

Views: 2083

Answers (3)

Code Ninja
Code Ninja

Reputation: 71

If the popup does not have data, That means Kendo is using the style for no data popup. In that case you to update style for the class .k-no-data only.

To change the height for popup with no data use any of the following approach,

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

or,

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

Upvotes: 0

xinthose
xinthose

Reputation: 3838

I found the answer here. You have to set the listHeight property.

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

Upvotes: 1

Salomon Zhang
Salomon Zhang

Reputation: 1565

You will see Kendo generate a div for the dropdown if you can inspect the elements on your browser.

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

Change the max-height for class k-list-scroller

Upvotes: 2

Related Questions