Sam Alston's Blog

When working with Flex (in particular with the spark framework) you run into scenarios where labels and other text-type fields will overdraw their containers.  This is particularly obvious when you have a Spark form.  I’ve noticed this with the Flex 4.5 and 4.6 SDKs.

The reason it does this is that the default Group (and it’s subclasses VGroup and HGroup)  do not, by default, scroll when the content is larger than the container size.  Their default behavior is to allow overdrawing.  To resolve, simply wrap your Group parent in a s:Scroller tag, as below:

BEFORE:

<s:Form width="100%" height="100%">
    <s:FormItem label="Name" width="100%">
        <s:TextInput id="Name" />
    </s:FormItem>
</s:Form>

AFTER:

<s:Scroller width="100%" height="100%">
	<s:VGroup width="100%" height="100%">
		<s:Form width="100%" height="100%">
			<s:FormItem label="Name" width="100%">
				<s:TextInput id="Name" />
			</s:FormItem>
		</s:Form>
	</s:VGroup>
</s:Scroller>

Your end result is a form that work much more nicely with the container.  If the content requires more space than that allowed by the Form’s container, it will go into a scroll-state.