Vaadin FormLayout formatting

Question

Im new at vaadin 7 and have a little issue with formatting.

I have spend a few hours but no luck.

I have:

• 2 Form layouts on my vertical Layout.
• 2 Labels on each form layout.

Better check the screenshot

I want format label test as on the right part of screenshot. Can you please advice or share thoughts or ideas.

Answer 1

I'm not 100% certain if I get what you're trying to do, but you might be able to achieve this through custom CSS.

It is hard to write out the exact CSS since it would require seeing the HTML generated by Vaadin and testing it with that, but it would be something like this for the labels:

.padded-form-layout v-caption:first-child {
   float: left;
   padding-left: 30px; /* set desired padding used for each label */
}

Of course, you'll need something similar for the values as well.

Above, padded-form-layout is the class name you define for layouts that need this look. In Java:

formLayout.setStyleName("padded-form-layout");

To figure out what the CSS modifications needed are I recommend you open the page in browser (Chrome or Firefox will do) and use the dev tools to directly modify the CSS to figure out what rules are needed. I usually do this by simply typing a style tag to the element, something like this (in this example, style="XXXXX" would be added manually. This is possible at least with Chrome's developer tools):

<div class="v-formlayout v-layout v-widget v-has-width" style="width: 100%;">
  <!-- ... -->
    <td class="v-formlayout-captioncell">
      <div class="v-caption v-caption-hasdescription">
        <span id="gwt-uid-21" for="gwt-uid-22" style="XXXXX">First name:</span>
        <span class="v-required-field-indicator" aria-hidden="true">*</span>
      </div>
    </td>
  <!-- ... -->
</div>

To be able to use the CSS, you'll need to either add it to your theme somehow and compile it (see Vaadin documentation about themes), or by using the @StyleSheet annotation