Как добавить полосу прокрутки в списке

Question

В Vaadin 14 я хотел бы иметь список с полосой прокрутки. Либо присутствует постоянно, либо, что еще лучше, появляется, когда пространство, необходимое для списка, превышает максимальную высоту списка. Это не обязательно должно быть сделано с использованием основного компонента ваадина;если есть что-то еще, что могло бы выполнить ту же работу и могло бы быть легко интегрировано в мое приложение Vaadin, это тоже хорошо.

У меня мало опыта в веб-компонентах, и я не знаю, с чего начать, чтобы этого добиться. ,Если требуется гораздо больше знаний, пожалуйста, укажите мне правильное направление, чтобы изучить их.

Answer 1

Установка высоты будет работать, и с небольшими изменениями CSS также будет работать max-height. Вот что вам нужно добавить в свою тему.

В Java (Vaadin 14+):

@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-list-box")

В CSS (my-styles.css):

[part="items"] {
  flex: auto;
  height: auto;
}

Я открыл новую проблему, чтобы исправить это: https://github.com/vaadin/vaadin-list-box/issues/56

Answer 2

Вот как компонент ListBox уже работает в Vaadin :) Появляется полоса прокрутки, если недостаточно места для отображения всех элементов

ListBox<String> listBox = new ListBox<>();
listBox.setItems("Bread", "Butter", "Milk");
listBox.setHeight("100px");
add(listBox);

Веб-компонент Страница документов Vaadin Vaadin-ListBox HTML