自定义 Vaadin JavaScript 组件溢出到 VerticalLayout 中的其他组件的问题答案

【问题标题】：Problems with a custom Vaadin JavaScript component overflowing into other components in the VerticalLayout自定义 Vaadin JavaScript 组件溢出到 VerticalLayout 中的其他组件的问题
【发布时间】：2013-10-28 10:37:21
【问题描述】：

我有一个自定义 JavaScript 组件（放置在 VerticalLayout 中），它的高度会随着用户输入而动态增长 - 类似于带有预览的 stackoverflow 编辑字段。

问题是当达到一定大小时，“预览”与放置在自定义组件下方的组件内容重叠。想象一下，当写超过 4 行时，“预览”会移动到标签字段后面并在 stackoverflow 中提交按钮。

JavaScript 组件的 css 不包含任何尺寸信息（除了宽度：100%），VerticalLayout 也不包含。

问题：如何在 Vaadin VerticalLayout 中指定如果先前组件的大小发生更改，组件应向下移动？

或者您有其他想法如何解决这种常见情况？

【问题讨论】：

标签： java javascript css vaadin

【解决方案1】：

问题是.setStyleName("myComponentInstance"); 的疏忽，该ExampleView 用于自定义组件。在检查 ExampleView.css 时，我发现有人定义了一个特定的大小和高度，这会干扰自定义组件本身的样式 - 结果非常混乱。

所以，如果您在开发 JavaScript Vaadin 组件时遇到类似情况：

删除使用代码中的myComponent.setStyleName("myComponentInstance")，以免干扰您自己的样式。
不要定义 css height 值，而是依赖于 VerticalLayout 组件中的默认大小。

【讨论】：

【解决方案2】：

您可以在 VerticalLayout 上使用 setSizeFull()，这样它就会随着添加到其中的内容而增长。

【讨论】：

VerticalLayout 已经设置为 setSizeFull 并且没有帮助。问题是，VerticalLayout 中其他组件的位置似乎是固定的，如果其中一个组件发生变化，也不会改变。