# Align elements vertically centered within a rowlayout

gkleinoscheg
1

I have got the following rowlayout defined in a zul-file:

<rowlayout ncols="9" spacing="10%">
<rowchildren colspan="5">
<label value="some very long text that is not going to fit into one line of the label and thus is presented in two lines" style="word-wrap: break-word;"/>
</rowchildren>
<rowchildren colspan="2" style="text-align: right;">
<label value="Button Label:" style="font-weight: 700;"/>
</rowchildren>
<rowchildren colspan="2">
<button id="btnTest"
src="/img/someButtonImg.png"
tooltiptext="click the button" />
</rowchildren>
</rowlayout>


The result is that all elements are sticking to the top of the row. How could I enhance the layout in order to have all elements vertically centered?

Edit:

I tried the following - adding an hbox:

<rowlayout ncols="9" spacing="10%">
<rowchildren colspan="5">
<label value="some very long text that is not going to fit into one line of the label and thus is presented in two lines" style="word-wrap: break-word;"/>
</rowchildren>
<rowchildren colspan="2" style="text-align: right;">
<hbox pack="start" align="center">
<label value="Button Label:" style="font-weight: 700;"/>
</hbox>
</rowchildren>
<rowchildren colspan="2">
<button id="btnTest"
src="/img/someButtonImg.png"
tooltiptext="click the button" />
</rowchildren>
</rowlayout>


However, only the pack attribute seemed to be transformed. The align attribute doesn't seem to have any effect as the height of the hbox is the same as the text of within it. It seems to me, that the height of an adjacent rowchildren (which may be higher) does not affect the other rowchildren.

I now switched to tablelayout which works just fine:

<tablelayout columns="3" width="100%">
<tablechildren width="60%">
<label value="some very long text that is not going to fit into one line of the label and thus is presented in two lines" style="word-wrap: break-word;"/>
</tablechildren>
<tablechildren style="text-align: right; vertical-align: middle;" width="20%">
<label value="Button Label:" style="font-weight: 700;"/>
</tablechildren>
<tablechildren width="20%">
<button id="btnTest"
src="/img/someButtonImg.png"
tooltiptext="click the button" />
</tablechildren>
</tablelayout>

delete retag edit

Sort by » oldest newest most voted

chillworld
5307 4 9
https://github.com/chillw...

Don't now if it's the best solution for performance but hbox or vbox can help you out here.
Just wrap the label in it and use the pack and align property.

## Edit:

I just played with your code in fiddle and I forwarded this issue to ZK.
The hbox works perfect, but the height of the div from rowchildren is another size then the first and last rowchildren.

Just had response back from ZK.
I'll quote the answer here :

The height 100% can't be calculated as the parent doesn't have a height either.
Then rowchildren is using "float: left", which doesn't respect the parent height anyway (IIRC).
Since this has been a traditionally hard/impossible layout challenge - CSS-flex was introduced into "modern" browsers (incl. IE11) If that's enough for your purpose then here an example how to achieve an automatically fitting line height

Chill.

[hide preview]