Width and Height doesnt work with %-values

[Fuzzipede]

I wrote a XML with a VBOX and some buttons. The buttons have a width of 100%. With this XML I build a new Component with ComponentMacros.build(); After that I add the new Component with Screen.instance.addComponent to the Screen.

Expected Behavior

The buttons should fill the whole width.

Current Behavior

The buttons are no buttons anymore.

Steps to Reproduce (for bugs)

Made a small little example project. Just build it with neko and start it.

Media

Test app / minimal test case

haxeuitest.zip

Context

Want to make fullscreenbuttons for my android-app

Your Environment

Tried with Neko, Windows and Android builds

[ianharrigan]

OK, so i think the issue is that you are using custom component:

So when you are using a custom component (with the xml build macro) you essentially have your actual component (the stuff in the XML) wrapped in another component (your actual class, extends Component). That component (the wrapper / container) is set to auto size (ie, size based on the contents). The contents are 100% so there is no size to calculate. Normally this isnt a problem if the custom component isnt your top-level component as you can set the size, eg:

<vbox width="100%">
    <menu width="200" />
    <menu width="100%" />
</vbox>

That should all work, however, you want to use menu as the top level component (which is perfectly valid). In which case the component container needs a size. There are a few ways to do this:

In Menu constructor you could do:

public function new() {
    percentWidth = 100; // or width = 200, etc
}

You could also set the with of a specific instance:

var menu = new Menu(); // or something.findComponent(Menu), or something.findComponent("menu"), etc
menu.percentWidth = 100; // or width = 200, etc

Finally, you could use css:

Menu {
   width: 100%; /* or 200px, etc */
}

There are actually a few different css rules you could use:

• Menu
• .menu
• .menu-container
• .custom-component

Note: beware using custom-component as this will apply to ALL custom-components, not just Menu

That make sense / help any?

Cheers, Ian

[Fuzzipede]

That makes totally sense. Oh dear... didnt thought of it as a component with auto-size. Thanks for the help and thanks for the great explanation.