I know it’s super simple, but I’ve been banging my head on text layout for a couple of hours. I wanted 2 text boxes to have less space between them (leading) than the default. After trying many approaches, I finally figured out that I can set a negative paddingBottom to achieve the desired effect.

Flex Code:

<mx:VBox>
	<mx:Text text="Line 1" styleName="line1Style"/>
	<mx:Text text="Line 2" styleName="line2Style"/>
</mx:VBox>

CSS:

.line1Style {
	fontSize: 38;
	fontWeight: bold;
	paddingBottom:-10;
} 

.line2Style {
	fontSize: 16;
}

While investigating this effect, I also found some other interesting layout resources:
Adobe’s Quickstart guide to positioning
Kevin Hoyt’s review of positioning in Flex


2 Comments

  1. Sep 3rd, 2007 at 18:09 pm Ersatz Matt

    Hi,

    Doesn’t the mx Text component have the ‘leading’ style? Did you try using that?

    Ersatz.

  2. Sep 3rd, 2007 at 19:09 pm Peter

    It’s been a while since I worked on this, but i believe the leading style in flex only works within a text box, not between two text boxes.

    -p

Add a Comment