Flex layout - resizing "inline" text components

Question

Hi,

I'm trying to create a simple layout of 3 horizontal Label/Text components. I'd like the components to resize depending on their text content, which will change at runtime.

The components should look something like this:

<mx:Label text="{firstNum}" />
<mx:Label text="-" />
<mx:Label text="{secondNum}" />

The output would look like "0-1" or "1-99" or "1000-9999".

My problem is that the default width of the Label is wider than it's content (even with paddings set to 0), and if I set an explicit width larger numbers will be truncated when the bound variables are updated.

So, I want to create a Label that is exactly as wide as it's content, even when that content is a single character.

On screen the text from the 3 Labels should look the same as if all the text was entered in a single Label.

(I need to keep the text in separate components so I can play effects on firstNum/secondNum individually.)

Seems like it should be easy enough, right?

Thanks! Stu

Answer 1

Hello.

I'm not sure I understood your question well, but try this:

Flex 3:

<mx:HBox horizontalGap="0">
   <mx:Label text="{firstNum}"/>
   <mx:Label text=" - "/>
   <mx:Label text="{secondNum}"/>
</mx:HBox>

Flex 4:

<s:Group>
   <s:layout>
      <HorizontalLayout gap="0"/>
   </s:Layout>
   <mx:Label text="{firstNum}"/>
   <mx:Label text=" - "/>
   <mx:Label text="{secondNum}"/>
</s:Group>

Of course you can set the horizontal gap to anything you like. This will make the Label control flow from left to right to as long as the parent container allows.

UPDATE:

If you mean the spacing between labels is too big, try setting padding (which you have), margin and horizontalGap / gap to 0.

If this still doesn't do the trick, could you put some code or a screenshot please?

Answer 2

There are several solutions:

1. Set negative paddings
2. Set negative horizontalGap in container
3. Move to Flex 4 and Spark Label - it does not have such problems