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

Question

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

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

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

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

在我的面板中，我添加了一个包含两个垂直布局的 HorizontalLayout（一个用于左侧，一个用于右侧）。这个 horizontalLayout 有间距，两个 verticalLayouts 也有间距。

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

Answer 1

假设，你真的想同时拥有 required 和 componentError，你必须给他们一些喘息的空间。一种方法是只为水平布局设置一个宽度，该宽度大于文本字段和标记的两倍。使用 50/50 分割，这只会将一些 space 保留到水平布局的第二个 "cell"，大小的变化无关紧要。

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

例如您为容器 (fixed-width-caption) 提供一些 class，然后添加

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

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

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

Avoid Panel resizing on TextField Validator error - Vaadin

vaadin

jakarta-ee