2 Margin and padding
Jakub Sobon edited this page 2020-11-14 01:29:24 -05:00

Doc Status

The terminal layout can be further adjusted by configuring margin and padding of containers. A margin is a cleared space on the outside of the container, i.e. between its border and whats beyond it. A padding is a cleared space on the inside of the container, i.e. between its border and its content.

The following diagram gives a visual explanation of where margin and padding apply:

/images/container-api/container_margin_padding.png

The margin or padding can be applied to a container by specifying absolute or relative values.

Absolute values

Absolute margin or padding is specified as the amount of cells that should be cleared. When specifying absolute values, the padding remains unchanged even if the terminal and container size changes.

Use one of the following options to specify absolute margin:

Use one of the following options to specify absolute padding:

Relative values

Relative margin or padding is specified as a percentage of the container's size. Specifying relative values is useful to accommodate terminal and container size changes. When the terminal size changes, so does the padding or margin.

Use one of the following options to specify relative margin. The top and bottom values are specified as percentage of the container's height.

The right and left values are specified as percentage of the container's width.

Use one of the following options to specify relative padding. The top and bottom values are specified as percentage of the container's height.

The right and left values are specified as percentage of the container's width.

Applying margin and padding to containers

The following code snippet demonstrates application and effect of margin and padding. The left container has both margin and padding applied. The right container has none of these options. Both containers contain a single button and have a border.

t, err := tcell.New()
if err != nil {
    return fmt.Errorf("tcell.New => %v", err)
}
defer t.Close()

addB, err := button.New("(a)dd", func() error {
    return nil
})
if err != nil {
    return fmt.Errorf("button.New => %v", err)
}

subB, err := button.New("(s)ubtract", func() error {
    return nil
})
if err != nil {
    return fmt.Errorf("button.New => %v", err)
}

c, err := container.New(
    t,
    container.Border(linestyle.Light),
    container.SplitHorizontal(
        container.Top(),
        container.Bottom(
            container.SplitVertical(
                container.Left(
                    container.PlaceWidget(addB),
                    container.AlignHorizontal(align.HorizontalRight),
                    container.Border(linestyle.Light),
                    container.MarginBottom(3),
                    container.MarginRight(1),
                    container.PaddingRight(3),
                ),
                container.Right(
                    container.PlaceWidget(subB),
                    container.AlignHorizontal(align.HorizontalLeft),
                    container.Border(linestyle.Light),
                ),
            ),
        ),
        container.SplitPercent(60),
    ),
)
if err != nil {
    return fmt.Errorf("container.New => %v", err)
}

The code above results in the following layout:

/images/container-api/container_margin_padding_actual.png