From KickApps API Reference

The Alignment panel enables you to align components vertically and horizontally, distribute vertical and horizontal space between them, and match their width and height. By default, the buttons in the Alignment panel are applied relative to the selected components within their selection box. Clicking the To Container button, and then clicking another button in the Alignment panel will apply that button's command to the selected components relative to their container.

• Align, distribute, and resize components relative to each other
• Align, distribute, and resize components relative to their container

Contents 1 Align, distribute, and resize components relative to each other 1.1 Align 1.1.1 Horizontal align left 1.1.2 Horizontal align center 1.1.3 Horizontal align right 1.1.4 Vertical align top 1.1.5 Vertical align center 1.1.6 Vertical align bottom 1.2 Distribute 1.2.1 Distribute horizontally 1.2.2 Distribute vertically 1.3 Match Size 1.3.1 Match width 1.3.2 Match height 1.3.3 Match width & height 2 Align, distribute, and resize components relative to their container 2.1 Example: Match width to container

Align, distribute, and resize components relative to each other

1. Open the Alignment panel by clicking Windows > Alignment.

   

2. Select one or more components.
3. Click a button in the Alignment panel to apply its command to the selected components. See below for illustrations of each command in the Alignment panel.

Align

Horizontal align left

Horizontal align center

Horizontal align right

Vertical align top

Vertical align center

Vertical align bottom

Distribute

The distribute commands position the selected components at equal vertical or horizontal distances from each other.

Distribute horizontally

Distribute vertically

Match Size

Match width

Resizes all selected components to the width of the widest selected component.

Match height

Resizes all selected components to the height of the tallest selected component.

Match width & height

Resizes all selected components to the width and height of the widest and tallest selected components.

Align, distribute, and resize components relative to their container

The widget canvas itself is considered a container, so every component is always within a container, even if you haven't explicitly created a container and put the component within it. All commands on the Alignment panel can be applied relative to the selected components' container, rather than relative to themselves or their selection box.

To apply Alignment commands relative to your selected components' container:

1. Open the Alignment panel by clicking Windows > Alignment.

   

2. Click the To Container button in the Alignment panel.

   

3. Select one or more components.
4. Click a button in the Alignment panel to apply its command to the selected components, relative to their container. See above for illustrations of each command in the Alignment panel.

Example: Match width to container

Toggling the To Container button and then clicking another button in the Alignment panel will apply the command for that button relative to the container of the selected component(s), rather than applying the command relative to their selection box or themselves. For example, with To Container toggled, aligning buttons to the left will position them flush with the left side of their container. In the example below we're re-sizing the width of the selected button to the width of its container, which encompasses the video screen, playbar, and our button.

This page was last modified on 17 December 2009, at 02:09. - This page has been accessed 544 times. -

About KickApps API Reference