O'Reilly logo

Learning Flex 4 by Elijah Robison, Alaric Cole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Controlling Whitespace in the Layout

The relative layouts (Horizontal/Vertical) provide a few options to help control whitespace between their child components. This section explores paddings and gaps, which are the properties used to control whitespace in relative layouts.

Padding the Layout

If you’ve used much CSS, you’re probably familiar with the concept of padding, which lets you specify a number of pixels by which to pad a container. Padding, which is available only to the relative layouts, creates space between a container’s borders and its child components. The specific padding properties include paddingLeft, paddingRight, paddingTop, and paddingBottom.

If you add a few buttons to a Panel with a vertical layout, by default the buttons will situate at the top-left corner, align vertically, and hug the left edge of the container. However, you can create space between a container and its components by setting padding properties, as demonstrated by Example 9-15 and Example 9-16 and Figure 9-8.

In Spark containers, padding is applied as properties of the nested layout, like in Example 9-15.

Example 9-15. Applying padding to the nested layout of a Spark Panel

<s:Panel title="Padding">
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
     </s:layout>
    <s:Button label="Button"/>
    <s:Button label="Button"/>
    <s:Button label="Button"/>
</s:Panel>

Halo containers, on the other hand, take padding properties directly; notice also in Example 9-16 that the layout is declared as a container ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required