# Align Example

An example which demonstrates the use of the `align` layout helper.

In this example, we use the `align` layout helper to align various constraints of the children of a container. The layout consists of a Field pinned to the top of the Container. Below the Field are two PushButtons each of which have their `left` boundary aligned. The top PushButton is then aligned with the `h_center` of the Field.

Tip

To see this example in action, download it from `align` and run:

    $ enaml-run align.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    # Copyright (c) 2013-2025, Nucleic Development Team.
    #
    # Distributed under the terms of the Modified BSD License.
    #
    # The full license is in the file LICENSE, distributed with this software.
    #------------------------------------------------------------------------------
    """ An example which demonstrates the use of the `align` layout helper.

    In this example, we use the `align` layout helper to align various
    constraints of the children of a container. The layout consists of
    a Field pinned to the top of the Container. Below the Field are two
    PushButtons each of which have their `left` boundary aligned. The
    top PushButton is then aligned with the `h_center` of the Field.

    << autodoc-me >>
    """
    from enaml.layout.api import align
    from enaml.widgets.api import Window, Container, Field, PushButton

    enamldef Main(Window):
        Container:
            constraints = [
                # Align the left edges of both PushButtons.
                align('left', pb1, pb2),

                # Align the top button with the center of the field.
                align('h_center', fld, pb1),

                # Pin the Field to the top of the Container. This is
                # orthogonal to the use of `align` for this example,
                # but is needed to have a well constrained system.
                contents_top == fld.top, contents_left == fld.left,
                contents_right == fld.right,

                # Setup the vertical constraints for the widgets. This is
                # orthogonal to the use of `align` for this example, but
                # is needed to have a well constrained system.
                fld.bottom + 10 == pb1.top, pb1.bottom + 10 == pb2.top,
                pb2.bottom <= contents_bottom,
            ]
            Field: fld:
                pass
            PushButton: pb1:
                text = 'Long Name Foo'
            PushButton: pb2:
                text = 'Bar'