Haxe UI not centered button

#1

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

#2

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

#3

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

#4

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

#5

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

Here is a link to the .zip

Cheers,
Dominik

#6

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
#7

Yes that worked thank you so much.

Cheers,
Dominik

1 Like