How to change a style of ListBox items?

I’m new to Vaadin.

Please help me with my a problem.

I created a desktop application with Lumo theme. I use the ListBox control in a Dialog to display information.
The items in the ListBox have too much height, and I need to make it more compact.
I’m trying to fix it in two ways:

  1. I changed vaadin-item style in shared-styles.html and ListBox becames compact look on the page. But it doesn’t work inside the Dialog.
  2. I created a html template:


    It looks OK.
    But how to modify it from Java code (add and delete items, catch a selection change events)?
    But how to change the ListBox from Java code (add and remove items, process a value change event )?


It indeed seems to be problematic to transfer CSS styles into components that are inside a Dialog, because Dialog puts its children inside its shadow dom. At least one thing that should work is to set CSS-properties for the component in Java:

listBox.getStyle.set("propertyName", "value");

You can also define how each item is rendered, and add styles to each of the items in Java:

listBox.setRenderer(new ComponentRenderer<>(item -> {
    Label label = new Label(item.getName());
    label.getStyle().set("propertyName", "value");
    return label;

For case 2: If you are using html template, do you already have a Java class that is bound to that template? [Here are the instructions on how to do so.]
( Then you can use @Id annotation to bind elements in the template to Java components. Suppose that in you template you have something like this:

<vaadin-list-box id="myListBox"></vaadin-list-box>

You can bind it to a Java component like this:

private ListBox myListBox;

And then you can use all the Java API of ListBox to set the items, add listeners etc:


There are more detailed instructions in the tutorials I linked above.

You can actually set styles for <vaadin-item> globally (even inside a dialog), by adding this to the shared-styles.html:

<dom-module id="my-item-style" theme-for="vaadin-item">
      :host {
        /* your styles here */

If you are interested, this is explained [in these tutorials]

And if you want to add the styles only to vaadin-items that are inside a dialog, you can similarly inject styles to the <vaadin-dialog-overlay> element:

<dom-module id="my-overlay-style" theme-for="vaadin-dialog-overlay">
      vaadin-item {
        /* your styles here */

Thanks. I’l try.