button - multi line support for label?

[ch_bowen]

I need to be able to use a button component and have the label text wrap to the next line if it is too large. For the life of me, I could not see how the button component does this. I did a little bit (code below) of a workaround, and the button will now wrap the label's text if it is larger than the width of the button. The problem I am having is centering the text and it is always left aligned.

Maybe I'm missing something.

Chris

<button width='89' height='30' datapath='section'>
<text name='content' fontstyle='bold' align='center' height='${parent.height}' multiline='true' width='${parent.width}' datapath='@label'/>
<method event='onclick'>
debug.write('do something!');
</button>

[may2285]

Hi...
one possible solution could be...use 'x' attribute of <text>....you can align the text on the button...

[cayres]

I think you can get by with applying the textalign attribute to the text in the button. It may also be better to constrain the button size to that of the text, rather than the other way around. Here's a little standalone example (using OL 4.2):<canvas debug="true">
<dataset name="section">
<data>
<row label="Here is a button label"/>
<row label="Here is another button label"/>
<row label="This is a &lt;u&gt;very&lt;/u&gt; long label that will take a lot of space!"/>
</data>
</dataset>
<simplelayout axis="y" spacing="10"/>
<button width="${content.width+10}" height="${content.height}" datapath="section:/data/row">
<text name="content" fontstyle="bold" align="center" multiline="true" textalign="center"
width="100" datapath="@label"/>
<handler name="onclick">
Debug.write("do something!");
</handler>
</button>
</canvas>

Charles