Haxe UI not centered button

Hey Guys,

i have the problem that i can´t center a button with Haxe UI version 2.
In the builder on haxeui.org it works fine.
When i atempt to compile it in html5 i doesn´t work.

Here is a example of the xml:

<vbox width="100%">
    <style>
    .button:hover {
        background-color: #d0d0d0;
    }
    .button {
        background-color: #bebebe;
        border-size: 2px;
        border-radius: 6px;
        text-align: center;
        filter: drop-shadow(3, 45, #000000, 0.3, 2, 2, 1, 3, false);
    }
    .buttonbig {
        font-size: 60px;
        height: 150px;
        width: 33%;
    }
    </style>
    <hbox horizontalAlign="center">
        <button id="button" text="Button" styleNames="buttonbig" width="300"/>
    </hbox>
</vbox>

Best regards,
Dominik

Hi, this seems to work fine for me:

<vbox style="padding: 5px;border: 1px solid grey;" width="100%">
    <button text="Button 1" horizontalAlign="center" />
    
    <hbox style="padding: 5px;border: 1px solid grey;" horizontalAlign="center">
        <button text="Button 1" />
        <button text="Button 2" />
        <button text="Button 3" />
    </hbox>
</vbox>

image

Do you have any more info? when you say html5 do you mean haxeui-html5 backend? Or, say, haxeui-openfl deployed to html5? Which browser? Does the snippet above work for you?

Cheers,
Ian

Hi Ian,

Yes i use the haxeui-html5 backend.
I use the Firefox browser in the version 60.0.2(64-Bit).

Unbenannt

I have tested it and this is the result from your code.

Cheers,
Dominik

And chance you could .zip up that whole project up and send it? My guess is your hosting .html file has something off in it.

Cheers,
Ian

https://drive.google.com/open?id=1MtezXCs0YAVlY_AxP7bS6nj32Wfjw5HG

Here is a link to the .zip

Cheers,
Dominik

Right, so there are two issues here regarding % widths:

First is that your outermost vbox doesn’t have “width=100%”… which means its autosized (ie, it will resize based on the contents of it)… However, the other components in are set to 100%… so the outermost vbox cant calc its width correctly. Basically, it is being set to 0 and the sub components (width = 100%) are 100% of that (ie, 0).

The second is you are using a custom component (Testbutton), im not sure if its intentional, but that is also set to autosize and later its contents are all 100% (so the same issue as above). Few ways to fix that;

  • in code use: percentWidth = 100; in the Testbutton constructor
  • set the width to 100% in main.xml (<testbutton width="100%" />)
  • use the .testbutton-container { width: 100%} as css somewhere (you could also give the instance an id and use #mything1 if you wanted to also ofc)

So basically what i did was to set the top level vbox to 100% and the <testbutton/> to 100%:

<vbox width="100%">
    <testbutton id="button" width="100%" />
</vbox>

That help / make sense / work?

Cheers,
Ian

1 Like

Yes that worked thank you so much.

Cheers,
Dominik

1 Like