避免面板调整TextField Validator错误 - Vaadin

Question

我创建了一个简单的登录表单，其中包含一些带验证器的必填字段。

我的字段表单布局是这样的：

    _________________________
    |  My SO Panel          |
     -----------------------
    |   _______    _______  |
    |  |_______|  |_______| |
    |   _______    _______  |
    |  |_______|  |_______| |
    |_______________________|

如果用户在表单左侧的某个字段中设置了无效值，则为红色！出现在该字段的右侧，因此所有其他字段都向右移动。

在我的面板中，我添加了一个Horizo​​ntalLayout，其中包含两个verticalLayout（一个用于左侧，一个用于右侧）。这个horizo​​ntalLayout有间距，两个verticalLayout也有它。

如果我的验证员显示他的话，我怎么能避免移动正确的字段！ ？

Answer 1

假设你实际上想要同时拥有required和componentError，你必须给他们一些喘息的空间。一种方法是设置水平布局的宽度，大于文本字段和标记的两倍。 50/50分割，这将为第二个＆＃34;单元保留一些空间＆＃34;水平布局和尺寸的变化无关紧要。

如果使用100％布局，这可能不那么容易。在这种情况下，你可以给标题（容器，两个标记都显示）给出一个固定的宽度。

所以，例如您为容器（fixed-width-caption）提供了一些类，然后添加

 .fixed-width-caption .v-caption { width: 40px }

这为所有字幕提供了40px的固定宽度，这至少在我的示例中是足够的，标准Valo设置对两个标记都是稳定的。