Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Tips – Label de largeur variable et troncature (truncateToFit)

Un petit article pour un petit "tip" sur Flex 3. Le problème se produit en fait lorsque l'on définit la largeur d'un label en pourcentage, comme par exemple:

<mx:Label text="This is a really long label" width="100%"/>

Si le conteneur qui est autour de ce composant Label est plus petit que la largeur du texte, celui-ci sera coupé de manière stricte. Le plus propre serait de tronquer le label en affichant "…" à la fin avec la valeur en toolTip. C'est ce qui se passe de base si vous donnez une largeur fixe au champ texte.

Il existe une propriété qui se nomme "truncateToFit" qui semble être la solution à tous nos problèmes. Seulement, si vous passez cette propriété à true, vous ne verrez aucun changement.

Il y a en revanche une solution trouvée par Daniel R. dans cet article:

Truncating labels that use a percentage width

La solution est en fait de donner une "minWidth" de 0 pour que le comportement soit correct. Vous n'avez en fait même pas besoin de la variable truncateToFit:

 <mx:HBox width="100" horizontalScrollPolicy="off">
  <mx:Label text="This is a very very very long text" width="100%" minWidth="0" />
 </mx:HBox>