I'm trying to create a CustomComponent where I have two columns (possibly four) where the two columns are rows of Labels. The first column is the identifier such as "Firstname: ", "Lastname: ", etc. and the second column is the actual value for the identifier such as "John", "Smith", etc.
I'm using a GridLayout so that the data is all line up nicely (for example John is lined up with Smith on the next line).
The problem I'm having is that I want the second column to take the remainder of the space width wise and have the text wrap to the next line when it's too long. So for example if I have a Comments Label that is a paragraph long I want the text to wrap but it just keeps going off the screen.
Now I understand that the Label needs to have a defined width to be able to wrap the text however I can't figure out how to use this to make the text in the labels in a grid wrap. I've tried everything I could think of.
My code is:
GridLayout gridLayout = new GridLayout();
gridLayout.setColumns(2);
gridLayout.setColumnExpandRatio(0, 1f);
gridLayout.addComponent(new Label("Firstname"));
gridLayout.addComponent(firstnameValueLabel);
gridLayout.addComponent(new Label("Lastname"));
gridLayout.addComponent(lastnameValueLabel);
// and so on.
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.addComponent(myHeaderComponent);
verticalLayout.addComponent(gridLayout);
I've tried everything I could think of to have the valueLabel (firstnameValueLabel, etc.) text wrap but nothing seems to work. I've tried to assign specific sizes to the GridLayout, the VerticalLayout, rather than 100%, and so on but without any success. I am using a VerticalLayout because I have additional stuff above the data.
Perhaps using a GridLayout isn't the best option, maybe there's a better way to line up forms that aren't fields. Although FormLayout would be perfect it only seems to work with input fields.
In any case how should I implement this so that the Label text wraps?
The answer was a combination of things. First the biggest tip I can offer is to look at Consume available space in Vaadin Gridlayout, but consider line breaks
After that the code above was using setCaption() when it should've been using setValue().
Combining these two things resolved the issue and the text wrapped.