Here is what I run into. If there are existing treads about this, my apologies. I can’t find any similar ones.
Panel A = new Panel();
Label X = new Label (" this one wraps.");
A.addComponent(X);
HorizontalLayout layout = new HorizontalLayout();
Label y = new Label (" this is fix size label.");
y.setWidth(100, Sizeable.UNITS_PIXELS);
Label z = new Label(“this one does not wrap.”);
layout. addComponent(y);
layout. addComponent(z);
A.addComponent(layout);
When the window is resized, Label X wraps just fine. But label Z will not wrap at all. The text is then clipped. I have tried putting panels around label Z. or the whole layout. Nothing works.
When I call “layout.setSizeFull()”, label Z now WRAPS. But the sizes of label y and label z are now the same which is not what I want.
What did I do wrong? I am kind of new to this. Please let me know.
You’ve tripped on one of the common Vaadin gotchas: Labels are 100% wide by default + undefined width Labels won’t wrap.
The Label in your first VerticalLayout works fine, because VerticalLayout is also 100% wide by default. HorizontalLayout, on the other hand, is not 100% wide by default. HorizontalLayout is undefined size.
When you add relative sized components (%) to undefined sized containers (invalid compination by spec), you’ll get unexpected results. In these cases, the container will revert all relative sizes to undefined size, hence your Label not wrapping.
When you put 100% width to the HorizontalLayout, space is divided equally among components, if no expand ratios are set. Hence the equally wide Labels.
So what I’m guessing you’re trying to achieve is keep the Y label always some specific width, and let Z label take remaining space in the container, and wrap if not enough space is available.
Here’s what you should try:
HorizontalLayout layout = new HorizontalLayout();
[b]
layout.setWidth("100%");
[/b]
Label y = new Label ("this is fix size label.");
y.setWidth("100px");
Label z = new Label("this one does wrap now."); // 100% wide by default
layout. addComponent(y);
layout. addComponent(z);
[b]
layout.setExpandRatio(z, 1);
[/b] // Accomodate all remaining space for this label Z
Update: In future, you can spot these invalid layout combinations with the debug window, which is opened when you add ?debug parameter after the app URI. Click “Analyze layouts” from the debug window, and it’ll point out any layout problems for you.