-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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>
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.
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.
But indeed, a good solution. Maybe add your self found solution as an answer.
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.
Asked: 2018-01-23 23:31:18 +0800
Seen: 34 times
Last updated: Feb 21 '18
Using a template.. but I want to load the first page dynamically? [closed]
Problem in vertical aligment on hlayout when setting vflex or height
Change the background of the TreeRow
Placeholder with phonemasking in IE11 Browser not working
zFlex performance in client side