Hello,
How to add a 2-line multiline caption to an HaxeUI button (Openfl backend)?
Best
OK, found it myself
XML:
and in CSS set fixed width for .btn and a height for .btn .label
Howdy - little late to the party 
I cant see your tags as you didnt put them in a code block, but you should just be able to do (assuming im understanding what you mean):
<button text="Line 1\nLine2\nLine3" />
As a total FYI, you can also put anything you like in Buttons (not that it will always be of any use ofc): http://haxeui.org/builder/?babwuj
<vbox style="padding: 5px;">
<button icon="haxeui-core/styles/default/haxeui.png" iconPosition="right" text="Line 1\nLonger Line 2\nLine 3" style="font-size: 24px;" />
<button>
<vbox>
<label text="Line 1" horizontalAlign="center" style="color: #FF4444;" />
<label text="Longer Line 2" horizontalAlign="center" style="color: #448844;" />
<label text="Line 3" horizontalAlign="center" style="color: #4444FF;" />
</vbox>
</button>
<button>
<progress indeterminate="true" />
</button>
</vbox>
Anyways, glad you worked it out, just not sure what your solution was since i couldnt see your xml
Cheers,
Ian
<button text="Line 1\nLine2\nLine3" />
this just worked for me, if I define a fixed width for the button and also a fixed height for button label. Without the fixed sizes the label the label does not autosize.
Do you have any more details (haxe version, openfl verison, haxeui version, etc). Ive just tried this on openfl:
<button text="Line 1\nLine2\nLine3" />
<button text="Line 1\nLonger Line2\nLine3" />
And it looks to work just fine:
You certainly dont (shouldnt) need to set a fixed w/h - maybe open an issue here with a test app? https://github.com/haxeui/haxeui-openfl/issues
Cheers,
Ian
I have
in a
CSS for button is
.btn-next {
background: #f8ab35;
border: 2px solid #ad7725;
border-radius: 8px;
width: 200px;
height: 80px;
icon-position: center;
}
.btn-next .icon {
margin-top: 16px;
}
and I get just one line.
If I add
.btn-next .label {
height: 60px;
}
I get the 2 lines. So the autosizing is not working.
Latest Openfl, Haxe etc. HTML5 backend
Am i missing something? I did:
<style>
.btn-next {
background: #f8ab35;
border: 2px solid #ad7725;
border-radius: 8px;
width: 200px;
height: 80px;
icon-position: center;
}
.btn-next .icon {
margin-top: 16px;
}
</style>
<button styleName="btn-next" text="Click Me!\nPlease" onclick="this.text='Thanks!'" style="font-size: 24px;" />
<button text="Click Me!\nPlease" onclick="this.text='Thanks!'" style="font-size: 24px;" />
And got:
I think you could argue for a fixed height button the label should still be vertically centered, which can be fixed with:
.btn-next .label {
vertical-align: center;
}
I think this should be default btw, so ill add that to the default styles. But im not seeing the issue where the label isnt auto-sizing inside the button.
It might make sense to open an issue on haxeui-openfl with a minimal test app? As, unless i am missing something it seems fine.
Cheers,
Ian
Sorry, for thre late answer.
First Im using Openfl backend and release to HTML5, not the HTML5 backend of haxeui. Did not knew there is also an HTML5 backend of HaxeUI. 
And second I think it is this bug/problem here
This hidden last line is really bad.
In the screen shots above i was using openfl (building for windows though)… Ill try html later… in the mean time could zip up a haxeui minimal project showing the issue so i can try this end, as im fairly sure things are “ok”, so could be my / your openfl version… version of haxeui… who knows.
At least if i have your test app then we are talking about / looking at the same thing.
Cheers,
Ian
Test example: https://www.file.io/download/N4tJNWCaz8io
HaxeUI with openfl backend and compiled for HTML.
Seems to work fine this end:
The button text is blurry because openfl is stretching the canvas… i cant remember how to turn that off but there is a setting in project.xml - unrelated to the lines though.
Heres the same app (from the link above) compiled to windows:
So, it all seems fine. I would suggest updating your openfl / lime / haxeui (although haxeui very recently had a new release)
Cheers,
Ian
I use the latest version from haxelib, openfl 9.1.0, HaxeUI 1.3.0 on Windows 10. I see the problem on 2 machines.
You might want to try using git versions of openfl / lime and rebuilding, see if that helps. Im on git versions of openfl / lime and am unable to reproduce the problem this end. 
Cheers,
Ian
Updating Openfl to GIT fixed the problem. Thanks.
1 Like