Мне требуется форматирование FormLayout

Question

Мне требуется форматирование FormLayout

1

Я новый в vaadin 7 и немного проблем с форматированием.

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

У меня есть:

2 Макеты форм на моем вертикальном макете.
2 Ярлыки для каждой формы.

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

Java Dude 25 дек. 2014, в 19:27

Источник

1

Можете ли вы опубликовать код?
kukis 25 дек. 2014, в 18:17
0

pastebin.com/T4nAjbeu отформатированный код
Java Dude 25 дек. 2014, в 18:23
2

Если вы хотите выровнять обе формы, вам нужно объединить их в одну форму. Заголовок и значения должны быть правильно выровнены. Если вам нужно больше гибкости, то вам придется работать с сеткой или похожим макетом.
André Schild 25 дек. 2014, в 19:06

Показать ещё 1 комментарий

Теги:

java

gwt

vaadin

vaadin7

vaadin-touchkit

1 ответ

Ещё вопросы

pastebin.com/T4nAjbeu отформатированный код
Если вы хотите выровнять обе формы, вам нужно объединить их в одну форму. Заголовок и значения должны быть правильно выровнены. Если вам нужно больше гибкости, то вам придется работать с сеткой или похожим макетом.

Kalle Björklid · Accepted Answer · 2014-12-31T13-31-00.000Z

Я не уверен на 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