Toggling item visibility breaks the Form alignment

Suite and Optimus
1

When an item is hidden and then shown again in a form, the container loses its alignment.

The CSS shows that, after the item is shown again, the container changes from display:flex to display:block.

Example:

const form = new dhx.Form("form", {
  height: 400,
  align: 'between',
  rows: [
    {
      id: 'name',
      type: "input",
      label: "Name",
      icon: "dxi dxi-magnify",
      placeholder: "John Doe",
      name: "name"
    },
    {
      id: 'email',
      type: "input",
      label: "Email",
      placeholder: "jd@mail.name",
      name: "email"
    },
    {
      id: 'submit',
      type: "button",
      value: 'submit'
    }
  ]
});

form.getItem('email').hide();
// After the item is hidden, the alignment is still fine.

form.getItem('email').show();
// After the item is shown again, the alignment is lost
2

Hello Czeslaw,

Thank you for the detailed description of the issue and the provided code. I already sent it to the dev team, and they will consider the best approach to solve this issue.

I will notify you of any updates, and till the issue is fixed, you can avoid it by manually resetting the style, as follows:

document.getElementById("showFixed").onclick = () => {
    email.show();
    document.getElementById("form").firstElementChild.style.display = "";
};

Here is an example:

Warm regards,