# Revision history [back]

### Problems with visible/invisible grids using flex

Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.

When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.

Here is some sample code.

flex_grid.zul

<?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')" />
<grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
<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 hflex="1" vflex="1" emptyMessage="No elements in second grid"
<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>
</hlayout>
</zk>


FlexGridVM

public class FlexGridVM {
private boolean firstGridVisible;

@Init
public void init() {
firstGridVisible = true;
}

public boolean isFirstGridVisible() {
return firstGridVisible;
}

public void setFirstGridVisible(boolean firstGridVisible) {
this.firstGridVisible = firstGridVisible;
}

@Command
@NotifyChange("firstGridVisible")
public void doSwitchGrid() {
firstGridVisible = !firstGridVisible;
}
}


The sample is really clear I hope.

If you set a fixed width to the <hlayout>, the behaviour is the same.

If you use the <hbox>, surprisingly you will get 3 differents behaviour. 1. If you set a fixed width, i.e. hflex="1000px", or width="100%", the behaviour is the expected one 2. If you set hflex="1", the behaviour is the same of <hlayout> 3. If you set neither width nor hflex, each time you switch the visibility, the first grid width increases each time of the half of the previous free space (?!)

Now, I could solve my problem using <hbox width="100%"> but I'd prefer to use <hlayout>: is there a way to obtain the same result using it?
<hlayout> and <hbox> are supposed to behave identically in this context?
Is the <hbox> behaviour correct, or there's a bug (obviously case 3 is a bug)?

Roberto

### Problems with visible/invisible grids using flex

Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.

When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.

Here is some sample code.

flex_grid.zul

<?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')" />
<grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
<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 hflex="1" vflex="1" emptyMessage="No elements in second grid"
<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>
</hlayout>
</zk>


FlexGridVM

public class FlexGridVM {
private boolean firstGridVisible;

@Init
public void init() {
firstGridVisible = true;
}

public boolean isFirstGridVisible() {
return firstGridVisible;
}

public void setFirstGridVisible(boolean firstGridVisible) {
this.firstGridVisible = firstGridVisible;
}

@Command
@NotifyChange("firstGridVisible")
public void doSwitchGrid() {
firstGridVisible = !firstGridVisible;
}
}


The sample is really clear I hope.

If you set a fixed width to the <hlayout>, the behaviour is the same.

If you use the <hbox>, surprisingly you will get 3 differents behaviour. 1. behaviour.

1. If you set a fixed width, i.e. hflex="1000px", or width="100%", the behaviour is the expected one 2. one
2. If you set hflex="1", the behaviour is the same of <hlayout> 3.
3. If you set neither width nor hflex, each time you switch the visibility, the first grid width increases each time of the half of the previous free space (?!)

Now, I could solve my problem using <hbox width="100%"> but I'd prefer to use <hlayout>: is there a way to obtain the same result using it?
<hlayout> and <hbox> are supposed to behave identically in this context?
Is the <hbox> behaviour correct, or there's a bug (obviously case 3 is a bug)?