Unexpected margin-right when foregoing widget sets margin and subsequent widgets have width of 1fr

[mzebrak]

Version: 0.83.0

I think the MRE explains everything. I can't think of any rational reason why it behaves this way. Do you have any ideas? This has been observable for a long time - look below.

MRE:

from __future__ import annotations

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


class MyApp(App):
    CSS = """
    #first-container {
        margin: 10;
        background: green;
        height: auto;
    }

    #second-container {
        background: red;
        height: auto;
        # width: 100%;   #  <--- Uncomment for a workaround
    }

    #third-container {
        background: blue;
        # width: 100%;   #  <--- Uncomment for a workaround
    }
    """

    def compose(self) -> ComposeResult:
        with Container(id="first-container"):
            yield Label("I should have some margin all around")
        with Container(id="second-container"):
            yield Label("I should have NO margin, but I have some on the right...")
        with Center(id="third-container"):
            yield Label("Here also should be no margin, but there is some on the right...")


MyApp().run()

0.16.0 Correct behavior

0.20.0 third-container has weird behavior

0.40.0 / 0.83.0 both second-container and third-container have weird behavior

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• Does Textual support images?
• No widget called TextLog

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.