Two columns of data (gridlayout and labels not wrapping text)


I’m trying to create a component/view where I have two columns (sometimes 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 such as “John”, “Smith”, etc.

The reason I’m using a gridlayout is to get everything to line up nicely (John, Smith, etc.),

I want the second column to take the remainder of the space width wise. That being said some data, such as say Comments, may be a paragraph or more, so I want the text to wrap.

Now I undersrtand that the Label needs a defined width to be able to wrap the text as explained here:!/thread/126872/181018
however I can’t figure out how to leverage this to make the text in the labels in a grid wrap.

My code is:

        VerticalLayout verticalLayout = new VerticalLayout();

        GridLayout gridLayout = new GridLayout();
        gridLayout.setColumnExpandRatio(0, 1f);

        gridLayout.addComponent(new Label("Firstname"));
        gridLayout.addComponent(new Label("Lastname"));
        // and so on.

I’ve tried everything I could think of to have the valueLabel text wrap. I’ve tried to assign specific sizes to the gridLayout, the verticalLayout, rather than 100%, and so on but without any success. And perhaps using a gridlayout isn’t the best option, perhaps there’s a better way to line up forms that aren’t fields. In any case how should I implement this so that the Label text wraps?

I found the solution. There were a few things missing. First you can find the best response at which shows exactly how to implement this at:
Second I was using Label.setCaption() rather than Label.setValue().