标准化Vaadin 14 Java API中的Vaadin表单宽度

我注意到，当我使用LoginForm时，它有一个默认大小。我不太明白它怎么会这么大。我想标准化我所有表单的大小，例如FormLayout和LoginForm。我不介意让我的FormLayouts与LoginForm的大小匹配，或者将LoginForm和FormLayouts设置为我自己的预设大小。问题是，当我将LoginForm的宽度设置为百分比时，它似乎永远不会与FormLayouts的大小匹配。。。对于相同的百分比，LoginForm总是显示得更小

---

有没有办法将我的LoginForms和FormLayouts设置为一致的宽度？

目前，似乎没有办法通过Java API从LoginForm获取字段。对于类似的问题，有一个解决方案

如本期所述，您可以执行JavaScript来获取相关元素。然后，您可以手动修改它的CSS。要设置登录表单的宽度，可以使用

vaadin登录表单包装器

UI.getCurrent().getPage().executeJavaScript("document.getElementsByTagName('vaadin-login-form-wrapper')[0].style.width = '200px';");

或者，您可以使用原始CSS并更改此元素的属性

---

在研究CSS之后，您可以发现表单的宽度是由CSS变量

--lumo-size-m

定义的。

vaadin登录表单wrapper的最大宽度由
calc（var（-lumo-size-m）*10）
定义。因此，您也可以更改主题或仅从中获取宽度并将其用于FormLayouts。
目前，似乎没有一种方法可以通过Java API从LoginForm获取字段。对于类似的问题，有一个解决方案

如本期所述，您可以执行JavaScript来获取相关元素。然后，您可以手动修改它的CSS。要设置登录表单的宽度，可以使用
vaadin登录表单包装器

UI.getCurrent().getPage().executeJavaScript("document.getElementsByTagName('vaadin-login-form-wrapper')[0].style.width = '200px';");

或者，您可以使用原始CSS并更改此元素的属性

在研究CSS之后，您可以发现表单的宽度是由CSS变量
--lumo-size-m
定义的。
vaadin登录表单wrapper的最大宽度由
calc（var（-lumo-size-m）*10）
定义。因此，您也可以更改主题，或者从中获取宽度，并将其用于FormLayouts