0

Align elements vertically centered within a rowlayout

asked 2018-01-23 23:31:18 +0800

gkleinoscheg gravatar image gkleinoscheg
1

updated 2018-01-24 16:39:00 +0800

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 flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2018-01-24 03:26:29 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9
https://github.com/chillw...

updated 2018-02-21 14:24:47 +0800

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.

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

http://zkfiddle.org/sample/3tcohlf/1-rowlayout-flex

Chill.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2018-01-23 23:31:18 +0800

Seen: 14 times

Last updated: Feb 21

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More