Flex - Label layout issue: shorter text means wider label

Question

Hi

Would anybody know why the following code results in the first label being wider than the second one? The first box (shorter text) measures 21 pixels in width, the second box 19 pixels.

<mx:VBox>
    <mx:HBox id="lbl1" backgroundColor="#6789ad">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

I ran this on Flex 3.4 and Flex 3.5. Same same but different using Flex 4, first box 20 pixels, second 19 again.

Cheers Tom

Answer 1

If you don't set a width on a container, it is only going to be as big as the contents need it to be. Trying setting a width on each of the HBox containers - explicit, as in width="50", or percentage, as in width="100%". A percentage width will make the HBox fill the width of the parent VBox.

<mx:VBox>
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="50">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width-"50">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

or

<mx:VBox width="50">
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="100%">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width="100%">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

Give it a shot....

Answer 2

The culprit may be the getMinimumText function in mx.controls.Label--essentially it enforces a 2 character minimum width on labels (specifically, measures any 0 or 1 character labels as if they contained "Wj").

To see if that's it, try replacing your "12" text with "Wj" and see if they come out the same size.

getMinimumText is overridden in SliderLabel to make the minimum 1 character ("W") instead. I assume it does that to allow centering of 1 character labels (over slider ticks). That's all SliderLabel does, so you might just use it instead.