1

我是 vaadin 7 的新手，格式有点问题。

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

我有：

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

最好检查一下截图

我想要屏幕截图右侧的格式标签测试。您能否提供建议或分享想法或想法。

4

1 回答 1

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 文档关于主题），或者使用@StyleSheet注释

于 2014-12-31T14:39:23.997 回答