First time here? Check out the FAQ!
![]() | 1 | initial version | |
The problem is mixing flex with hlayout, it happens as follows:
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>
![]() | 2 | No.2 Revision |
The problem is mixing flex with hlayout, it happens as follows:
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>