TextFlow.verticalAlign

When Setting Vertical Align on a TextFlow to VerticalAlign.MIDDLE or VerticalAlign.BOTTOM, The First TextFlowLine Selection and Caret is vertically offset with respect to the distance of vertical space between the top of the Container boundary and the top of the First Line of Text.

What is the trick to make the Text Selection line up on the First TextFlowLine when verticalAlign is not set to 'top'?

below is a simple code example that demonstrates it. The first line of text "Hello World" is positioned properly, however when you click on

the TextLine to edit it, the Caret appears some 100 pixels below where its supposed to, and so does the text selection.

I am loading this module within an app that is compiled in SDK 3.2

/******************************      BEGIN CODE ******************************/

package {
    import flash.text.engine.BreakOpportunity;
   
    import flashx.textLayout.container.ContainerController;
    import flashx.textLayout.edit.EditManager;
    import flashx.textLayout.elements.Configuration;
    import flashx.textLayout.elements.ParagraphElement;
    import flashx.textLayout.elements.SpanElement;
    import flashx.textLayout.elements.TextFlow;
    import flashx.textLayout.formats.TextLayoutFormat;
    import flashx.textLayout.formats.VerticalAlign;
   
    import mx.core.UIComponent;

    public class TextFrameExample extends UIComponent
    {
        var textFlow:TextFlow;
        public function TextFrameExample()
        {
            var config:Configuration = new Configuration();
            var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
            textLayoutFormat.color = 0xFF0000;
            textLayoutFormat.fontFamily = "_sans";
            textLayoutFormat.fontSize = 22;
            textLayoutFormat.breakOpportunity = BreakOpportunity.ANY;
            textLayoutFormat.verticalAlign = VerticalAlign.MIDDLE;
           
            config.textFlowInitialFormat = textLayoutFormat;
            textFlow = new TextFlow(config);
            var globalP:ParagraphElement = new ParagraphElement();
           
            var p:ParagraphElement = new ParagraphElement();
            var span:SpanElement = new SpanElement();
            span.text = "Hello, World!";
            p.verticalAlign = VerticalAlign.TOP;
            p.addChild(span);
            textFlow.addChild(p);           
           
            p = new ParagraphElement();
            span = new SpanElement();
              p.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";
            p.addChild(span);
            textFlow.addChild(p);
           
            p = new ParagraphElement();
            span = new SpanElement();
            span.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";          
           
            p.addChild(span);
            textFlow.addChild(p);
           
           
            textFlow.interactionManager = new EditManager();
            textFlow.flowComposer.addController(new ContainerController(this, 0, 0));
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(500, 500);
            textFlow.flowComposer.updateAllControllers();
           
        }
       
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(unscaledWidth, unscaledHeight);
            textFlow.flowComposer.updateAllControllers();
        }
    }
}

/******************************      BEGIN CODE ******************************/

Thanks for your time!

Bow