title: Why does Vaadin layout rearrange component position when clicked
body: <p>I have two custom components in my Vaadin UI that I have placed in a GridLayout along the same row.
  Whenever the page loads, the components are in some incorrect position however, upon clicking my component (or any other component of that type anywhere else on the page) the layout seem to correct itself and realign to the grid cell it occupies. This layout correction seems to occur across the entire page with varying levels of rearrangement depending on how incorrectly it rendered the page initially.</p>
  
  <p>An image below illustrates what happens when the page is loaded and the component is clicked:
  <a href="https://i.stack.imgur.com/VLXEp.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLXEp.gif" alt="Clicking changes position"></a></p>
  
  <p>The 'Off' button shown in the image is a custom object inheriting <code>HorizontalLayout</code> and uses a <code>addListener</code> to add a <code>LayoutClickListener</code> to the object which is what the button uses to detect whether it has been clicked. Here is the code for this object:</p>
  
  <pre><code>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();
      }
  }
  </code></pre>
  
  <p>where the <code>turnOn()</code> and <code>turnOff</code> methods simply alter the CSS styling of the object.</p>
  
  <p>The '2/5 Connections' bar shown in the image is simply a Vaadin <code>Label</code> with some CSS for the styling.</p>
  
  <p>The 'shadow' that the bar leaves behind after it moves does not appear on the actual page, but I guess is an artifact that my screen capture picked up for some reason.</p>
  
  <p>These two components are inside a custom GridLayout of 2x2. The 'Off' button occupies the second row of the first column and the bar occupies the second row of the second column which I have set a column expand which is why it occupies more space than it's neighbouring column. There is indeed another row above what I have captured in the image which is occupied by a simple title <code>Label</code> across both columns.</p>
  
  <p>Everytime I refresh the page the layouts return to their incorrect, offset positions prior to any clicks in the above image.</p>
  
  <p>Does anyone know why the layouts would:</p>
  
  <ol>
  <li><p>Upon reloading of the page display components in wrong positions; and</p></li>
  <li><p>Why clicking a component triggers a rearrangement of the layout?</p></li>
  </ol>
  
  <p>Any help is appreciated.</p>
  
  <p>Update:</p>
  
  <p>After performing a quick test by removing the <code>LayoutClickListener</code> from the component, the layouts are still rendered possibly incorrectly but since they are unclickable, do not provide a way to shift the positions to my intended places. It seems as though the simple change in CSS styling alters the positions of the components in the layout even though the only difference between the red and grey states of the button only differ in colour (and not size or position which shouldn't affect the Vaadin layout positions anyway).</p>