Tutorial EzLang Adjusting Position

It is not possible to control position in layout modes other that float. In the fixed layout modes it is still possible to adjust position. This can be done with padding and aligning.

Aligning

Aligning can be done horizontally (halign) or vertically (valign). Aligning is only useful if the widget is smaller than the layout.

Halign supports:

• Left
• Center
• Right

Valign supports:

• Top
• Middle
• Bottom

If a widget has "halign: center" and it is less wide than its parent layout, it will be centered horizontally. This can be useful for example in a box mode layout with vertical orientation. In that case, widgets will be stacked vertically and you have no control over horizontal position. By using halign, you can still control whether the widgets go left, right, or in the center. Here is an example of this with a label:

- Layout:
    mode: box
    orientation: vertical
    border: true
    - Label:
        text: Hello world
        auto_scale: true, true
        halign: center
        border: true

Padding

Padding adds empty space to the left, right, top, and/or bottom of a widget. It allows you to create some space between widgets, create a margin between the border of a layout and a widget, etc. There are 7 different padding properties:

• padding: left, right, top, bottom (e.g. "padding: 1, 1, 1, 1")
• padding_x: left, right (e.g. "padding_x: 1, 1")
• padding_y: top, bottom (e.g. "padding_y: 1, 1")
• padding_left: left (e.g. "padding_left: 1")
• padding_right: left (e.g. "padding_right: 1")
• padding_top: left (e.g. "padding_top: 1")
• padding_bottom: left (e.g. "padding_bottom: 1")

Here is an example layout with 2 labels without padding:

- Layout:
    mode: box
    orientation: vertical
    border: true
    - Label:
        text: Hello world
        auto_scale: true, true
        border: true
    - Label:
        text: Hello world
        auto_scale: true, true
        border: true

Here is the same example with padding:

- Layout:
    mode: box
    orientation: vertical
    border: true
    - Label:
        text: Hello world
        padding_left: 1
        padding_bottom: 1
        auto_scale: true, true
        border: true
    - Label:
        text: Hello world
        padding_left: 1
        auto_scale: true, true
        border: true

Continue

The general tutorial continues with: EzLang Keyboard Selection.