为什么Vaadin布局在单击时重新排列组件位置

Question

我的Vaadin UI中有两个自定义组件，我放在同一行的GridLayout中。 每当页面加载时，组件处于某个不正确的位置，但是，在单击我的组件（或页面上任何其他位置的任何其他组件）时，布局似乎自己纠正并重新对齐它占据的网格单元。这种布局修正似乎发生在整个页面上，具有不同的重新排列水平，具体取决于它最初渲染页面的错误程度。

下面的图片说明了加载页面并单击组件时会发生什么：

＆＃39;关闭＆＃39;图像中显示的按钮是继承HorizontalLayout的自定义对象，并使用addListener向对象添加LayoutClickListener，该按钮用于检测是否已单击该对象。以下是此对象的代码：

public class StatusLight extends HorizontalLayout {
private Integer radius;
private Label contentLabel = new Label();
Boolean on;

public StatusLight(Integer radius, String content, String styleName){
    setRadius(radius);
    setHeight(radius, Unit.PIXELS);
    setWidth(radius, Unit.PIXELS);

    setContentString(content);
    contentLabel.setContentMode(ContentMode.HTML);
    contentLabel.setSizeUndefined();

    addComponent(contentLabel);

    addListener(new LayoutEvents.LayoutClickListener() {
        @Override
        public void layoutClick(LayoutEvents.LayoutClickEvent event) {
            switchLight();
        }
    });
}

public void switchLight() {
    if (isOn()) {
        turnOff();
    } else {
        turnOn();
    }
}

turnOn()和turnOff方法只是改变了对象的CSS样式。

＆＃39; 2/5连接＆＃39;图片中显示的条形图只是一个Vaadin Label，带有一些CSS样式。

影子＆＃39;该栏移动后留下的栏落在实际页面上不会出现，但我想这是我的屏幕截图由于某种原因而拾起的一件神器。

这两个组件位于2x2的自定义GridLayout中。 ＆＃39;关闭＆＃39;按钮占据第一列的第二行，而栏占据第二列的第二行，我已经设置了一个列展开，这就是为什么它占据的空间比它的相邻列多。在我在图像中捕获的内容之上确实存在另一行，该行在两列中都被简单标题Label占用。

每次刷新页面时，布局会在上图中的任何点击之前返回错误的偏移位置。

有谁知道布局的原因：

1. 将页面显示组件重新加载到错误的位置;以及

2. 为什么点击组件会触发布局的重新排列？

感谢任何帮助。

更新

通过从组件中删除LayoutClickListener执行快速测试后，布局仍然可能会错误地呈现，但由于它们不可点击，因此不提供将位置移动到我想要的位置的方法。似乎CSS样式的简单改变改变了布局中组件的位置，即使按钮的红色和灰色状态之间的唯一区别仅在于颜色（而不是不应影响的大小或位置）。无论如何，Vaadin布局位置。）