Clash Royale CLAN TAG

Vaadin Grid wrap labels in componentColumns

I'm currently working on a webapp project in Vaadin 10. On the main page there's an overview of your current chats. Each chat is displayed as a bubble looking like:

Vaadin 10

It contains an image and a label.

I placed the bubbles in a Grid to ensure fast loading and flexibility like this:

`Grid<VisualGroup> cloudGrid = new Grid<VisualGroup>();
cloudGrid.setWidth("100%");
cloudGrid.setHeight("100%");
cloudGrid.getElement().getStyle().set("border","white");
cloudGrid.addComponentColumn(VisualGroupComponent::new);
cloudGrid.setItems(groups);`


My problem is that the label does not wrap when I put the components in the grid. If I create the component independently the text wraps correctly like:

But if I use the grid like described above it looks:

Does anyone know how to get text wrapping working in ComponentColumns in vaadin?

EDIT:
I finally got it working, even though it seams like a pretty hacky solution to me. The problem is, that the elements inside the grid layout inherit most of their style values from the grid. And the grid seems to forbid wrapping somewhere. Because the usual html Tags linke word-break: break-word; and
word-wrap: break-word; did not work I found a workaround by resetting the style of the text with all:initial. This completely resets the style and you need to set the important attributes like font-family:var(--lumo-font-family) manually to achieve the same look. But now the wrapping works.

word-break: break-word;

word-wrap: break-word;

all:initial

font-family:var(--lumo-font-family)

If anyone knows the exact attribute I need to overwrite to get just the wrapping working and not delete every thing else that would probaly the best solution. But for now that is a workaround.

Div name = new Div(); name.setText(group.getName());

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.