Matching Objects' Height or Width

The toolbar provides buttons to assist you in aligning or resizing the components in your UI Designs.

Matching Height or Width of Multiple Components in Your UI Design

  1. Open a UI Design in the UI Design Editor or select an open UI Design.
  2. Select the objects whose size you wish to match in the layout area of the UI Design Editor or in the Outline view.
  3. The selected objects will be displayed with a bounding box that has drag rectangles at each corner and in the middle of each side as shown in Figure 1.

    before cleanup

    Figure 1 - Multiple objects ready for size matching

    The size matching operation will use the most recently selected component as the standard for the desired size of the other selected objects.

    NOTE You can recognize the most recently selected component by looking for the one with solid drag rectangles. In Figure 1, the Range Editor component illustrates the appearance of the most recently selected component.

  4. Click the button in the toolbar which corresponds to the desired size matching operation.
  5. The toolbar's buttons are logically grouped into sets which perform similar operations, as shown in Figure 2. The two buttons in the Match section allow you to match the width or height of the selected objects respectively.

    toolbar labeled

    Figure 2 - The Toolbar Pane for the UI Design Editor

    The selected components will be resized as necessary to match the height or width of the most recently selected component, as shown in Figure 3.

    after match height

    Figure 3 - Multiple objects after resizing

    NOTE If you perform an operation that does not give the desired results, you may use the standard Undo item in the Edit menu to restore your design to its original state.