Vaadin FormLayout форматирование

Question

Я новичок в vaadin 7 и имею небольшую проблему с форматированием.

Я провел несколько часов, но не повезло.

Я имею:

• 2 Форма макетов на моем вертикальном макете.
• 2 метки на каждом макете формы.

Лучше проверь скриншот

Я хочу проверить формат этикетки, как в правой части скриншота. Можете ли вы дать совет или поделиться мыслями или идеями.

Answer 1

Я не уверен на 100%, если получу то, что вы пытаетесь сделать, но вы могли бы достичь этого с помощью пользовательского CSS.

Трудно написать точный CSS, так как для этого потребуется увидеть HTML, сгенерированный Vaadin, и протестировать его с этим, но для меток это будет примерно так:

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

Конечно, вам понадобится нечто подобное и для значений.

Выше, padded-form-layout - это имя класса, которое вы определяете для макетов, которые нуждаются в этом виде. В Java:

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

Чтобы выяснить, какие модификации CSS необходимы, я рекомендую вам открыть страницу в браузере (это будет делать Chrome или Firefox) и использовать инструменты dev для прямой модификации CSS, чтобы выяснить, какие правила необходимы. Я обычно делаю это, просто набирая тег стиля для элемента, что-то вроде этого (в этом примере style="XXXXX" будет добавлен вручную. Это возможно, по крайней мере, с помощью инструментов разработчика Chrome):

<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>

Чтобы иметь возможность использовать CSS, вам нужно как-то добавить его в свою тему и скомпилировать (см. Документацию Vaadin о темах), или с помощью @StyleSheet аннотирование