Label wrap text in VerticalLayout

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I know this is a common problem but I can’t wrap my head around it.

My class

[code]
public class OverView extends Panel implements View {

root = new VerticalLayout();
setContent(root);

// Header

header = new HorizontalLayout();

titleLabel = new Label(“Super long text which is wider than the browser window”);
// width is 100% per default

filter = new TextBox(“Search”);
filter.setWidth(“200px”);

header.addComponent(titleLabel);
header.addComponent(filter);

header.setComponentAlignment(filter, Alignment.MIDDLE_RIGHT);
}
[/code]Now my problem is, that the titleLabel only wraps if the browser width is smaller than the length of the label.
But it should take the filter (searchbar) into consideration when wrapping

http://i.imgur.com/7DrLJmp.png
http://i.imgur.com/9YlfVDm.png

This is how I want it:
http://i.imgur.com/lCwbsj5.png

But I don’t want to set the titleLabel to a fixed size.

Thank you for your help

2

I think you need to set 100% width both for the titleLabel and filter, and then set expand ratio for the titleLabel (and not for the filter). Perhaps the 100% width for the filter is not necessary, I’m not immediately sure how it went.

3

Hmm, the filter should have undefined or fixed width, not 100%.

Also, note that the alignment setting does not set text alignment, but alignment of the component within the layout cell. However, as the label has 100% width, it entirely fills the layout cell, and hence the alignment setting has no effect. You can set the text alignment in CSS with the text-align property.

4

Sorry for the late response.

I still cant seem to figure it out.

The titleLabel will only be wrapped if the browser size is smaller than the whole titleLabel.
I need that the filter will always be shown.

5

First of all, you need to define sizes for your component containers: set a width for the panel, vertical layout and the horizontal layout.

Once you’ve done this, the only thing you need to change is the expand ratio of the label. Here’s a working version:

public class OverView extends Panel {
        public OverView() {
           setSizeFull();
           VerticalLayout root = new VerticalLayout();
            setContent(root);
            root.setWidth("100%");

           // Header
            HorizontalLayout header = new HorizontalLayout();
            header.setWidth("100%");

            Label titleLabel = new Label(
                    "Super long text which is wider than the browser window");
            // width is 100% per default

            TextField filter = new TextField("Search");
            filter.setWidth("200px");
            header.addComponent(titleLabel);
            header.addComponent(filter);
            header.setComponentAlignment(filter, Alignment.MIDDLE_RIGHT);
            header.setExpandRatio(titleLabel, 1);

            root.addComponent(header);
        }
    }