Question

我是vaadin 7的新手，并且在格式化方面存在一些问题。

我花了几个小时但没有运气。

我有：

2垂直布局上的表单布局。
每个表单布局上的2个标签。

Better check the screenshot

我想在截图的右侧部分进行格式标签测试。能否请您建议或分享想法或想法。

Answer 1

如果我得到您正在尝试的内容，我不能100％确定，但您可以通过自定义CSS实现这一目标。

很难写出确切的CSS，因为它需要看到Vaadin生成的HTML并用它进行测试，但对于标签来说会是这样的：

.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会这样做）并使用开发工具直接修改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 documentation about themes），或使用@StyleSheet注释

Vaadin FormLayout格式化

1 个答案: