CODEWITHSUNDEEP
listboxscrollbarvaadinweb-component
Stevo
Stevo

Reputation: 23

How to add a scrollbar on a listbox

In Vaadin 14, I would like to have a listbox with a scrollbar. Either permanently present, or even better, one that appears when the space needed for the list exceeds the maximum height of the listbox. It does not necessarily have to be done using the vaadin core component; if there is something else out there that would do the same job and can be integrated into my Vaadin application easily, that's also fine.

I have little experience in web components and have no idea where to start to achieve this. If much more knowledge is necessary, please point me in the right direction to learn it.

Upvotes: 2

Views: 1213

Answers (2)

Jouni
Jouni

Reputation: 2918

Setting height will work, and with minor CSS changes max-height will also work. Here’s what you need to add to your theme.

In Java (Vaadin 14+):

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

In CSS (my-styles.css):

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

I opened a new issue for fixing this: https://github.com/vaadin/vaadin-list-box/issues/56

Upvotes: 2

anasmi
anasmi

Reputation: 2652

This is how a ListBox component already works in Vaadin :) Scrollbar appears, if there is no enough space to display all items 

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

enter image description here

A Web-component Vaadin docs page Vaadin-ListBox HTML

Upvotes: 2

Related Questions