How to make a renderer full width for a listbox item

General
1

As you can see on https://api.pi4j.com/board-information/MODEL_4_B, 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/BoardInfoView.java at main · Pi4J/pi4j-board-info-service · GitHub

2

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
3

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:

anchor.addClassName(Display.BLOCK);

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:

anchor.addClassName(Padding.Vertical.SMALL);
1 Like
4

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