How to do vertical alignment

[Puge96]

Hi!

I'm having troubles with vertical alignment of items.

public void Compose(IDocumentContainer container)
{
    container
        .Page(page =>
        {
            page.Size(PageSizes.A4.Landscape());
            page.DefaultTextStyle(style => style.FontSize(10).FontFamily("Arial").FontColor("#3b4151"));
            page.Content().Element(ComposeContent);
        });
}

internal void ComposeContent(IContainer container)
{
    container.PaddingLeft(40f).PaddingTop(40f).PaddingRight(40f).Column(column =>
    {
        column.Item().Border(1).Height(200).Table(table =>
        {
            table.ColumnsDefinition(x =>
            {
                x.RelativeColumn(100);
                x.RelativeColumn(100);
                x.RelativeColumn(100);
            });
            
            table.Cell().Border(1).AlignCenter().AlignTop().Text("Align top");
            table.Cell().Border(1).AlignCenter().AlignMiddle().Text("Align middle");
            table.Cell().Border(1).AlignCenter().AlignBottom().Text("Align bottom");
        });
    });
}

Result:

Goal:

In this example I wish to align cells within a table but I have the same issue when working with Column layouts; that I cannot get AlignMiddle() & AlignBottom() to do anything.

What am I misunderstanding / doing wrong?

Please advice, thanks.

[MarcinZiabek]

The table layout structure takes minimal vertical space as possible. To achieve your requirement, please use the Row element.

.Height(200).Border(1).Row(row =>
{
    row.Spacing(50);

    row.RelativeItem().ExtendVertical().AlignTop().Height(50).Background(Placeholders.BackgroundColor());
    row.RelativeItem().ExtendVertical().AlignMiddle().Height(50).Background(Placeholders.BackgroundColor());
    row.RelativeItem().ExtendVertical().AlignBottom().Height(50).Background(Placeholders.BackgroundColor());
});

[Puge96]

Sweet! Yet again, thank you very much.

[MarcinZiabek]

I decided to improve the Row element to respect the provided vertical space, to better match the expected behavior. This change is done within the following commit: e0dc65d

As a result, the following code will be sufficient to achieve the desired layout (please notice the lack of ExtendVertical calls):

.Height(200).Border(1).Row(row =>
{
    row.Spacing(50);

    row.RelativeItem().AlignTop().Height(50).Background(Placeholders.BackgroundColor());
    row.RelativeItem().AlignMiddle().Height(50).Background(Placeholders.BackgroundColor());
    row.RelativeItem().AlignBottom().Height(50).Background(Placeholders.BackgroundColor());
});