Consume available space in Vaadin Gridlayout, but consider line breaks

Question

I use Vaadin's GridLayout for visualization of some title and value labels. The GridLayout has 2 columns and several rows. Title labels are on the left side and their associated value labels on the right.

I want the first column to consume as less space as possible and the second column should occupy all the remining space of the browser's window. If a value label requires more space than available then it must break the line.

I tried to play with setColumnExpandRatio(). If I determine following ratio for the second column (and omit a ratio specification for the first column) then everything works as requested except the fact that value labels with very large textual content don't break at the line's end. Instead, a horizontal scroll bar appears:

public class MyPanel extends GridLayout
{
   public MyPanel()
   {
       setWidth("100%");
       setMargin(true);
       setSpacing(true);

       buildView();
   }

   public void buildView()
   {
       removeAllComponents();
       setColumns(2);
       setColumnExpandRatio(1, 1);
       ...
       titleLabel.setWidth(null);
       valueLabel.setWidth(null);

       addComponent(titleLabel);
       addComponent(valueLabel);

       setComponentAlignment(titleLabel, Alignment.TOP_RIGHT);
   }
}

If I also specify a ratio for the first column then the first column consumes more space than really needed.

How can I realize my requirements?

jupenur · Accepted Answer · 2014-06-18T15:33:18.943

The contents of a Label only wrap if the Label has a defined width. Think about it: if the width is undefined, how should it even be determined when to wrap the text? The solution here is as simple as setting the width of valueLabel to "100%". Actually, it's even more simple than that. A fresh Label instance is 100%-wide by default, so you can just remove the line where you are setting the width to null.

Here's an example UI class to test it with:

public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest request) {

        GridLayout layout = new GridLayout();
        layout.setWidth("100%");
        layout.setColumns(2);
        layout.setColumnExpandRatio(1, 1);

        Label label1 = new Label("Lorem ipsum");
        Label label2 = new Label(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                        + "Morbi augue sapien, tempus ac mattis ut, iaculis a erat. "
                        + "Ut vitae ante metus. Pellentesque vitae rutrum lacus, id volutpat tellus. "
                        + "Duis eget ultricies metus. "
                        + "Vestibulum ac nibh eget velit pretium semper et eget est. "
                        + "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. "
                        + "Curabitur nec rutrum tellus. Curabitur vel urna a nunc cursus congue. "
                        + "Vestibulum pellentesque mi in leo luctus, sit amet auctor enim ornare. "
                        + "Proin in mauris convallis, vestibulum nisi sed, consectetur dolor. "
                        + "Vestibulum ultricies metus ut nulla gravida, eget dapibus turpis fringilla. "
                        + "Mauris hendrerit felis non aliquam elementum. "
                        + "Phasellus ut purus ut urna consequat commodo. "
                        + "Cras semper ac augue quis rutrum. "
                        + "Nunc tristique magna sit amet congue faucibus.");

        layout.addComponent(label1);
        layout.addComponent(label2);

        label1.setWidth(null);
        label2.setWidth("100%"); // I'm being explicit, but you can just as well leave this out if you like

        setContent(layout);
    }
}

That's absolutely the correct answer! I never tried this combination. I found a further solution which is more complex but has the same requested effect. It's the comment of ``Jouni Koivuviita`` on [link](https://vaadin.com/forum/#!/thread/126872/181018). He suggests to reference a custom defined CSS class which enables word wrap. Java: ``label2.addStyleName("wrap");``, CSS: ``.v-label-wrap { white-space: normal; }`` — PAX, Jun 19 '14 at 07:49

Consume available space in Vaadin Gridlayout, but consider line breaks

1 Answers1

Linked