The problem is mixing flex with hlayout, it happens as follows:

• command triggered and vm update the visible attribute
• the first grid is updated at first and then becomes visible
• calculate width and height based on the flex settings !! but note, the second grid still visible at this moment
• the visible attribute of second grid is updated then the second grid becomes invisible

then you see the first grid with wrong size

This is why it happened and only first grid has problem

what you can do is, if you want to let multiple components share one block and display only one of a time, use a div to wrap all the components with original flex settings then use width="100%"/height="100%" to replace the flex settings of those components.

e.g.,

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
    <hlayout apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
         vflex="1">
        <button label="Switch grid" onClick="@command('doSwitchGrid')" />
        <div hflex="1" vflex="1">
            <grid height="100%" width="100%" emptyMessage="No elements in first grid"
                visible="@load(vm.firstGridVisible)">
                <columns>
                    <column label="Name" hflex="1" />
                    <column label="Surname" hflex="1" />
                    <column label="Birthday" hflex="min" />
                    <column label="City" hflex="min" />
                    <column label="Note" hflex="2" />
                </columns>
            </grid>
            <grid height="100%" width="100%" emptyMessage="No elements in second grid"
                visible="@load(not vm.firstGridVisible)">
                <columns>
                    <column label="Note" hflex="2" />
                    <column label="City" hflex="min" />
                    <column label="Birthday" hflex="min" />
                    <column label="Surname" hflex="1" />
                    <column label="Name" hflex="1" />
                </columns>
            </grid>
        </div>
    </hlayout>
</zk>

The problem is mixing flex with hlayout, it happens as follows:

• command triggered and vm update the visible attribute
• the first grid is updated at first and then becomes visible

• calculate width and height based on the flex settings settings

  !! but note, the second grid still visible at this moment

• the visible attribute of second grid is updated then the second grid becomes invisible

then you see the first grid with wrong size

This is why it happened and only first grid has problem

what you can do is, if you want to let multiple components share one block and display only one of a time, use a div to wrap all the components with original flex settings then use width="100%"/height="100%" to replace the flex settings of those components.

e.g.,

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
    <hlayout apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
         vflex="1">
        <button label="Switch grid" onClick="@command('doSwitchGrid')" />
        <div hflex="1" vflex="1">
            <grid height="100%" width="100%" emptyMessage="No elements in first grid"
                visible="@load(vm.firstGridVisible)">
                <columns>
                    <column label="Name" hflex="1" />
                    <column label="Surname" hflex="1" />
                    <column label="Birthday" hflex="min" />
                    <column label="City" hflex="min" />
                    <column label="Note" hflex="2" />
                </columns>
            </grid>
            <grid height="100%" width="100%" emptyMessage="No elements in second grid"
                visible="@load(not vm.firstGridVisible)">
                <columns>
                    <column label="Note" hflex="2" />
                    <column label="City" hflex="min" />
                    <column label="Birthday" hflex="min" />
                    <column label="Surname" hflex="1" />
                    <column label="Name" hflex="1" />
                </columns>
            </grid>
        </div>
    </hlayout>
</zk>