How to make a renderer full width for a listbox item

As you can see on, when you click on the text of a listbox item, the link changes to make each item in the list accessible via a direct link. But if you click left or right from the text, the URL doesn’t change. Can this be fixed by changing the renderer in any way?

listBox.setRenderer(new ComponentRenderer<>(board -> {
    var lbl = new Anchor("/board-information/" + board.getName(), board.getLabel());
    lbl.addClassNames(LumoUtility.Gap.XSMALL, LumoUtility.TextColor.BODY);
    return lbl;

Full code: pi4j-board-info-service/src/main/java/com/pi4j/boardinfoservice/views/ at main · Pi4J/pi4j-board-info-service · GitHub

Because of how the content is placed in the ListBox item, I am afraid there’s no easy option to make the content take. While an anchor is the right option for an element that also changes the URL of a page, I guess it doesn’t play nicely when placed in a ListBox.

Have you tried using the SideNav instead? Or maybe, if the ListBox is the best option for you, you could try and see if the pushState API could be used instead of an Anchor.

1 Like

Ideally, you probably shouldn’t use ListBox here because its items are interactive elements themselves. Generally, it’s best to avoid nesting interactive elements. As Diego mentioned, SideNav is likely the better option.

That said, the hacky CSS solution would be something along these lines:


This will make the anchor element take up the entire width.

To bypass the item’s padding, you could use negative margins. However, the padding is set like this:

padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));

So, I’d recommend creating a new theme variant for ListBox that removes the item padding:

vaadin-list-box[theme~="no-padding"] vaadin-item {
  padding: 0;

Then, add the padding to the anchors:

1 Like

Thanks for the tips @anezthes and @diego.cardoso. SideNav is indeed a better option for this use-case. New version has been deployed.

1 Like