TLF with Flex Spark RichText ColumnCount - only getting one column
Hey, I'm new to using TLF, I'm just trying to get a block of text to display its text flow as 3 columns. I'm using the Spark RichText control (this uses the TLF right?). I have given the control an explicit width of 800 and a height of 200. I've then attached a css style wich specifies a columnCount of 3 for the control. I then populated the controls content property with xml representing a textflow using the tlf markup. I expected this to result in 3 colums of text that are 200px high and each one around 253px wide (allowing 20px columnGap).
However the actual result is a single column that is 253px wide and the text extends beyond the 200px bounds of the RichText control wich does seem to have the correct height of 200px. So it seems the TextFlow is getting that it needs to fit into the columns correctly but it's ignoring the height of the RichText container and so never reaches a bottom so that it can break over to the next column.
How do i get the RichTexts textflow to listen to the RichTexts height and break over to the next column when it reaches the bottom. Do i need to be setting the height of the text flow or somthing.
I'm using the flash builder/ gumbo beta release from the adobe labs site and the TLF version that comes with that version of the sdk. So maybe this is a bug? I cant find any tutorials or solid info about how to use the RichText control to make columns of text so everything I have done here has been guess work, is there anything i am missing?
Heres the relevent code bits....
<s:RichEditableText
id="shippingBody"
content="
{SHIPPING_COPY}"
styleName="
footerBody"
height="
200" width="800" />
public
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<p>
<span>doopey dooo Lorem ipsum dolor sit amet... </span>
</p>
</TextFlow>
;static var SHIPPING_COPY:XML =
.footerBody
{
font-family: Verdana;
color: #999999;
font-size: 10pt;
line-height: "200%";
trackingRight:"10%";
font-grid-fit-type:pixel;
column-count:3;
text-align: justify;
text-align-last: left;
}
