CODEWITHSUNDEEP
apache-flexlayoutlabelwidth
Thomas Auinger
Thomas Auinger

Reputation: 2095

Flex - Label layout issue: shorter text means wider label

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

Upvotes: 1

Views: 979

Answers (2)

Michael Brewer-Davis
Michael Brewer-Davis

Reputation: 14276

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.

Upvotes: 4

Eric Belair
Eric Belair

Reputation: 10682

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

Upvotes: 1

Related Questions