java - Vaadin FormLayout 格式

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 */
}

当然，您还需要类似的值。

上面，ppped-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注释