Margin and fr don't mix well

[rodrigogiraoserrao]

Edit: original MRE was wrong.
See the real issue below

[willmcgugan]

This seems to work as I would expect. A blank line, followed by the lines with text.

What do you get?

[rodrigogiraoserrao]

Don't mind me, I got the MRE mixed up.

Real issue: setting margins in widgets inside a container doesn't mix well with also using fr in those widgets.

The labels in the MRE below have 3 lines each. Each sets a margin to 1.
We set the outer container to height: 8.
Instead of splitting the 8 lines 4-4, the fr gives 4 lines to each label and then we need two extra lines for the margins.

What we get:

Expected output:

• margin.css:

Container {
    height: 8;
    background: pink;
}

#top {
    background: red;
    margin-top: 1;
    height: 1fr;
}

#bot {
    background: blue;
    margin-bottom: 1;
    height: 1fr;
}

• margin.py:

from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Label


class MyApp(App[None]):
    CSS_PATH = "margin.css"

    def compose(self) -> ComposeResult:
        with Container():
            yield Label("one\ntwo\nthree", id="top")
            yield Label("four\nfive\nsix", id="bot")

[rodrigogiraoserrao]

I have had all sorts of weird interactions with margin in the past. May be related with the above.

[willmcgugan]

Awesome, looks like my branch fixes that.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.