# Problem with borderlayout south/center inside tab panel

davout
1429 3 18

I'm trying to use a borderlayout south/center layout inside a tabs tabpanel as shown in the ZUL below and nothing is being displayed. Any ideas?

<tabpanels>
<tabpanel id="panelScenarioProps" width="100%" height="100%">
<borderlayout height="100%" width="100%">
<center>
<grid width="100%" height="100%">
<columns>
<column width="140px"
label="" />
<column label="" />
</columns>
<rows>
<row>
<label value="New scenario name" />
cols="100" constraint="no empty" />
</row>
<row>
<label value="Description" />
toolbar="Basic" height="150px" />
<label /								</row>
<row								<label value="Source" />
<hlayout>
label="Derived"
<combobox
id="sourceScenarios"
selectedItem="@bind(vm.selectedSourceItem)">
<template
name="model" var="option">
<comboitem
label="@bind(option.title)" />
</template>
</combobox>
</hlayout>
</row>
</rows>
</grid>
</center>
<south height="50px">
<grid width="100%">
<columns>
<column width="140px" label="" />
<column label="" />
</columns>
<rows>
<row>
<space />
<hlayout>
<button label="Cancel" onClick="@command('propsCancel')" />
<space />
<button label="Next"
onClick="@command('propsNext')" />
</hlayout>
</row>
</rows>
</grid>

</south>
</borderlayout>

</tabpanel>



delete retag edit

## 5 Replies

cvarona
554 1 6

Your markup is invalid and not so easy to test, but borderlayouts only work when there is a definite height (i.e., in px, for instance) available, either in the borderlayout parent or in the borderlayout child itself. For the case of "center", since it's not allowed to specify a certain height on it, there must be a px height defined somewhere upwards.

With kind regards

César Varona

davout
1429 3 18

The full ZUL includes a top level panel which has 100% height. Is that sufficient, or do I have to use 'px' heights?

cvarona
554 1 6

No, it's not sufficient. There must be a definite, specific height in px.

César Varona

henrichen
3869 2

@davout,

Shall say that, 100% is a legal option but might be that its parent element's height is 0px and you cannot see the result. I will suggest using Firebug(in Firefox) to inspect the relative DOM elements and check what the real reason is.

cvarona
554 1 6

The way border layouts are rendered changed as of zk 5.0.8 and it has been fairly difficult to get them right since then, but in the most simple cases. I could even mention a related issue in the tracker.

With kind regards

César Varona

[hide preview]