title: Vaadin - How to have two columns of data (Gridlayout with field and Label data with wrapping text)
body: <p>I'm trying to create a <code>CustomComponent</code> where I have two columns (possibly four) where the two columns are rows of <code>Labels</code>. 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.</p>
  
  <p>I'm using a <code>GridLayout</code> so that the data is all line up nicely (for example John is lined up with Smith on the next line).</p>
  
  <p>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 <code>Label</code> that is a paragraph long I want the text to wrap but it just keeps going off the screen.</p>
  
  <p>Now I understand that <a href="https://vaadin.com/forum/#!/thread/126872/181018" rel="nofollow">the <code>Label</code> needs to have a defined width to be able to wrap the text</a> 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.</p>
  
  <p>My code is:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>I've tried everything I could think of to have the <code>valueLabel</code> (<code>firstnameValueLabel</code>, etc.) text wrap but nothing seems to work. I've tried to assign specific sizes to the <code>GridLayout</code>, the <code>VerticalLayout</code>, rather than 100%, and so on but without any success. I am using a <code>VerticalLayout</code> because I have additional stuff above the data. </p>
  
  <p>Perhaps using a <code>GridLayout</code> isn't the best option, maybe there's a better way to line up forms that aren't fields. Although <code>FormLayout</code> would be perfect it only seems to work with input fields. </p>
  
  <p>In any case how should I implement this so that the <code>Label</code> text wraps?</p>