В этом StackBlitz у меня есть раскрывающийся список Kendo for Angular с высотой всплывающего окна, равной 20px. Тем не менее, когда я открываю раскрывающийся список, высота всплывающего окна остается неизменной. Как заставить это работать?
@Component({
selector: 'my-app',
template: `
<kendo-dropdownlist [data] = "listItems" [popupSettings] = "{ height: 20 }">
</kendo-dropdownlist>
`
})
export class AppComponent {
public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
}
Лучший способ сделать это — использовать popupClass вместо height. Это позволяет вам определить класс css, который выполняется для всплывающего окна. В этом классе вы можете определить такие атрибуты, как минимальная высота и т. д.
[popupSettings] = "{ popupClass: 'myPopupClass' }"
Редактировать:
В приведенном выше решении похоже, что вам нужно установить ViewEncapsulation.None и установить свойство высоты в css.
Я нашел более простое решение:
Похоже, вам также нужно установить «listHeight». По умолчанию listHeight составляет 200 пикселей.
Посмотрите на этот Stackblitz
<kendo-dropdownlist [data] = "listItems" [popupSettings] = "{ height: 20 }" listHeight = "20">
</kendo-dropdownlist>
Кстати, посмотри этот пример, тоже не работает.
Спасибо за обновление, теперь все заработало, но пришлось использовать [listHeight]
не знаю почему.
Вы должны использовать [] в случае привязки к переменной, т.е. [listHeight] = "имя_переменной" против listheight = "20"
Проблема с этим подходом заключается в том, что я не могу установить высоту динамически. Кроме того, я вижу
height
в документации, почему это не работает?