How to display a label with dynamic size inside a Scroller

Question

I have an issue with the display of a label in one of my application.

I have a view where I display a label. The text of this label can be updated at anytime, and this text can consist of one word as it can be a long text with some newline characters.

If the whole text can fit in the parent view, I want it to be centered vertically. If it is too long to fit, I want to display a scrollbar.

So I'm using a Scroller:

<s:Scroller left="5" top="50" right="5" bottom="5">
    <s:Group> 
        <s:Label id="description" text="{hostComponent.description}"
                 width="100%" verticalCenter="0"/>
    </s:Group>        
</s:Scroller>

If the text is short, the label is centered as expected, but when the text is long enough for the scollbar to be displayed, I can't see the first lines (9)

If I leave out verticalCenter="0" then a long text will display fine but short text are not vertically centered anymore.

Does anybody have an explanation for that and/or a solution to my problem?

Answer 1

Try to use HGroup:

<s:Scroller id="scroller" left="5" top="50" right="5" bottom="5">
    <s:HGroup verticalAlign="middle" width="100%" height="100%"> 
        <s:Label id="description" text="{hostComponent.description}"
                 width="100%"/>
    </s:HGroup>        
</s:Scroller>