Question

In my .mxml file, I am populating two side by side Labels with text data from a database.

Like this:

    <s:Label x="10" y="37.5" width="100%" text="{data.city}"/>
    <s:Label x="86" y="36.75" width="100%" text="{data.state}"/>

Sometimes, I will get a particularly long piece of text data and this will cause the 2 labels to overlap each other and become totally unreadable.

I think this is happening because I have the x and y set. Is there a way to make this more dynamic?

Thanks!

Answer 1

I would recommend exploring different Flex layout containers.

HGroup

<s:HGroup>
    <s:Label text="{data.city}"/>
    <s:Label text="{data.state}"/>
</s:HGroup>

This provides the kind of layout it sounds like you’re looking for from your example. However, you may also want to look at a few other containers Flex offers.

Form

Flex forms align data in ways that are often useful for creating, well, forms. You may want to consider this for your UI, especially if you’re allowing a user to give input that persists back to your DB.

<s:Form>
    <s:FormItem label="City:">
        <s:Label text="{data.city}"/>
    </s:FormItem>
    <s:FormItem label="State:">
        <s:Label text="{data.state}"/>
    </s:FormItem>
</s:Form>