| « Flex Developer Remoting Edition | Debugging event handlers in MXML gotchas » |
Truncate Labels in percent width containers
It is abundant problem to truncate Label control in percent-width container. For example we have the following code:
XML:
<?xml version="1.0" encoding="utf-8"?> | |
<mx:Application | |
horizontalAlign="left" | |
xmlns:mx="http://www.adobe.com/2006/mxml" | |
layout="vertical"> | |
<mx:Style> | |
Box | |
{ | |
border-style: solid; | |
border-color: #000000; | |
border-thickness: 1; | |
} | |
</mx:Style> | |
<mx:Box | |
width="10%"> | |
<mx:Label | |
width="100%" | |
text="Lalalalalalallallallalallalallallalalalallalalalal" /> | |
</mx:Box> | |
<mx:Box | |
width="10%"> | |
<mx:Spacer | |
height="20" /> | |
</mx:Box> | |
</mx:Application> |
The result is:
As we can see the first container takes more than 10% (because the second container is exactly 10% width). As far as we know truncateToFit property is true by default and there is no way to make the first container 10% width too except to extend Label component:
- package com.riapriority.controls
- {
- import mx.controls.Label;
- public class AutoTruncatedLabel extends Label
- {
- public function AutoTruncatedLabel()
- {
- super();
- }
- override protected function measure():void
- {
- super.measure();
- if (truncateToFit)
- {
- measuredMinWidth = 0;
- measuredWidth = NaN;
- }
- }
- }
- }
Lets modify our application to see the difference:
XML:
<?xml version="1.0" encoding="utf-8"?> | |
<mx:Application | |
horizontalAlign="left" | |
xmlns:mx="http://www.adobe.com/2006/mxml" | |
layout="vertical" | |
xmlns:controls="com.riapriority.controls.*"> | |
<mx:Style> | |
Box | |
{ | |
border-style: solid; | |
border-color: #000000; | |
border-thickness: 1; | |
} | |
</mx:Style> | |
<mx:Box | |
width="10%"> | |
<controls:AutoTruncatedLabel | |
width="100%" | |
text="Lalalalalalallallallalallalallallalalalallalalalal" /> | |
</mx:Box> | |
<mx:Box | |
width="10%"> | |
<mx:Label | |
width="100%" | |
text="Lalalalalalallallallalallalallallalalalallalalalal" /> | |
</mx:Box> | |
</mx:Application> |
The result is the following:
As we can see the first label is truncated and the first container width is 10% now. To expand the first container to full text width just set our Label’s truncateToFit property to false.
Hope it helps! 
Bookmark this article at
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
2 comments
the label drove me nuts!
This should definitely be the default behaviour of the Label component.
Arnoud Bos
Comment feed for this post