Formatting issues with the virtual list in Vaadin 23 - list

Question

I have created a VirtualList to display books information. My renderer presents each book information as an accordion, where first panel is generic book information (author, title, etc.) and it might have three more panels: annotation, commentary, reviews.
It is working as expected, but I do have formatting problems.
Here is my book renderer:
private final ComponentRenderer<Component, Book> bookRenderer = new ComponentRenderer<>(
book -> {
//info panel
Accordion bookPresentation = new Accordion();
HorizontalLayout bookInfo = new HorizontalLayout();
bookInfo.getStyle().set("background-color", book.getHighlight());
bookInfo.setWidth("100%");
UnorderedList authorsList = createAuthorsList(book.getAuthors());
authorsList.setMinWidth("24%");
VerticalLayout taggedTitle = createTaggedTitle(book);
VerticalLayout stars = createStarRating(book);
VerticalLayout readerRating = createReaderRating(book);
VerticalLayout bookStatus = createStatusField(book);
bookInfo.add(authorsList, taggedTitle, stars, readerRating, bookStatus);
AccordionPanel summary = new AccordionPanel(bookInfo);
summary.addThemeVariants(DetailsVariant.SMALL);
summary.addClassName("book-item");
bookPresentation.add(summary);
//annotation panel
if (book.getAnnotation() != null && !book.getAnnotation().isBlank()) {
TextArea annotation = new TextArea();
annotation.setWidth("75%");
annotation.setValue(book.getAnnotation());
annotation.setReadOnly(true);
annotation.setMaxHeight(MAX_HIGHT);
bookPresentation.add("Аннотация", annotation);
}
if (book.getCommentary() != null && !book.getCommentary().isBlank()) {
TextArea comment = new TextArea();
comment.setValue(book.getCommentary());
comment.setReadOnly(true);
comment.setMaxHeight(MAX_HIGHT);
bookPresentation.add("Комментарий", comment);
}
if (book.getReadersReviews() != null && !book.getReadersReviews().isEmpty()) {
Accordion reviews = new Accordion();
for (ReadersReview review : book.getReadersReviews()) {
TextArea reviewText = new TextArea();
reviewText.setMaxHeight(MAX_HIGHT);
reviewText.setValue(review.getReaderComment());
if(user == null || !user.getReaderName().equalsIgnoreCase(review.getReviewerName())) {
reviewText.setReadOnly(true);
}
reviews.add(review.getReviewerName(), reviewText);
}
bookPresentation.add("Мнение читателей", reviews);
}
return bookPresentation;
});
And here is what I am getting on the screen:
I have separation line between accordion panels, but no separation between two items (books) in the list. I'd prefer to have it otherwise. At least I do need to separate one book from another. I did search Vaadin documentation but didn't find any settings that can display such separator between VirtualList items. I'd like to have this separator to be of a different color and line width than accordion panel separator. I followed Joel advise and added border to the styles.css file and added CSS class to the accordion or to its first panel, but it didn't have any effect.
The gap between items in the displayed VirtualList varies significantly as it can be seen on the screenshot. Sometimes items go one after another, and sometimes distance between them can reach 2+ inches. How can I set a fixed distance between these items?
I have set the width of bookInfo panel to 100% but as you can see, it occupies significantly less. I also specify the width of every component and sum of them should be equal to 100%, but as you can see they aren't aligned. What I am missing there?

Answer 1

To put a separator line between items, you'll want to use CSS. One way to do it is to set a CSS class name on your VirtualList items (via your renderer), say "book-item", and then use some CSS like the following:
.book-item {
border-top: 3px solid darkgray;
}
.book-item:first-of-type {
border-top: none;
}