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

Question

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

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

JavaScript组件的css不包含任何大小调整信息（宽度：100％旁边），VerticalLayout也不包含。

问题：如果在更改早期组件的大小时，如何在Vaadin VerticalLayout中指定组件应向下移动？

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

Answer 1

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

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

1. 删除使用代码中的myComponent.setStyleName("myComponentInstance")，以避免干扰您自己的样式。

2. 不要定义css height值，但要依赖VerticalLayout组件中的默认大小。

Answer 2

你可以在VerticalLayout上使用setSizeFull（），这样它就会在添加的内容上增长。