避免在 TextField Validator 错误上调整面板大小 - Vaadin

Question

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

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

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

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

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

当我的验证器显示他的时，我该如何避免移动正确的字段！ ?

Answer 1

假设您实际上想要同时拥有required 和componentError，您将不得不给它们一些喘息的空间。一种方法可能是只为水平布局设置一个宽度，该宽度大于文本字段和标记的两倍。使用 50/50 分割，这只会为水平布局的第二个“单元格”保留一些空间，并且大小的变化无关紧要。

如果您使用 100% 布局，这可能不是那么容易。在这种情况下，您可以为标题（显示两个标记的容器）提供固定宽度。

例如你为你的容器提供一些类（fixed-width-caption）然后添加

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

这为所有字幕提供了 40 像素的固定宽度，至少在我的示例中，使用标准 Valo 设置，这足以使两个标记都保持稳定。