Align elements vertically centered within a rowlayout

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

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>