title: How to keep the components in the same place in FormLayout for Vaadin Flow
body: <p>I would like to use FormLayout where one of the fields is visible depending on another field. Is there a way to keep the formatting the same, that is for all the fields after it to stay in their same position when another component is invisible.</p>
  <p>Below is the code to reproduce as well as a screenshots of what I would like compared to the current behavior. In essence each time you select the combobox you make the &quot;Year Joined Team&quot; field invisible/visible.</p>
  <pre><code>TextField nameTextField = new TextField(&quot;Name&quot;);
  ComboBox&lt;String&gt; teamComboBox = new ComboBox&lt;&gt;(&quot;Team&quot;);
  DatePicker yearJoinedDatePicker = new DatePicker(&quot;Year Joined Team&quot;);
  TextField moreFieldsTextFields = new TextField(&quot;More fields&quot;);
  
  FormLayout formLayout = new FormLayout();
  formLayout.setWidth(&quot;600px&quot;);
  formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep(&quot;0&quot;, 2, FormLayout.ResponsiveStep.LabelsPosition.TOP));
  
  formLayout.add(nameTextField,
          teamComboBox, yearJoinedDatePicker,
          moreFieldsTextFields);
  
  teamComboBox.setItems(List.of(&quot;One&quot;, &quot;Two&quot;));
  teamComboBox.addValueChangeListener(change -&gt; yearJoinedDatePicker.setVisible(!yearJoinedDatePicker.isVisible()));
  
  formLayout.setColspan(nameTextField, 2);
  
  add(formLayout);
  </code></pre>
  <p>Ideally the goal is to have the fields below the <code>yearJoinedTeamDatePicker</code> component to stay below so that all other components below continue to be aligned correctly when it's set to be invisible.</p>
  <p><a href="https://i.stack.imgur.com/yW0Tq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yW0Tq.png" alt="enter image description here" /></a></p>
  <p>Instead what actually happens is that all the components are shifted on field to the left, as if the invisible component is no longer part of the <code>FormLayout</code>. Meaning the <code>moreFieldsTextField</code> is now on a different row, and if everything is setup for two columns every row will be incorrect. I understand that this makes sense in some context but in a <code>FormLayout</code> is there a way to keep the form formatted if a component is invisible?</p>
  <p><a href="https://i.stack.imgur.com/PYdI1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PYdI1.png" alt="enter image description here" /></a></p>
  <p>If for example I had firstname and lastname as two side by side fields they would now be on different rows as shown below:</p>
  <p><a href="https://i.stack.imgur.com/vvcTa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vvcTa.png" alt="enter image description here" /></a></p>
  <p>A very hacky solution would be to add in a <code>Span</code> component or something like that and make it invisible when the <code>yearJoinedDatePicker</code> field is visible, and invisible when it's visible. Basically fill it in with an empty field when it's invisible. That is a hacky workaround but it doesn't seem like an appropriate solution. With that in mind is there a way to keep the formatting/layout if a component is invisible?</p>