How to change a style of ListBox items?

Flow
1

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:




    {{ item.name}}



    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 )?
2

Hi!

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.]
(https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-basic.html) 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:

@Id("myListBox")
private ListBox myListBox;

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

myListBox.setItems(...
myListBox.addValueChangeListener(...

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

3

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">
  <template>
    <style>
      :host {
        /* your styles here */
      }
    </style>
  </template>
</dom-module>

If you are interested, this is explained [in these tutorials]
(https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes).

4

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">
  <template>
    <style>
      vaadin-item {
        /* your styles here */
      }
    </style>
  </template>
</dom-module>
5

Thanks. I’l try.