Margin-right does not work properly when RadioSet is present on the screen. about textual HOT 12 CLOSED

I've not dived onto the why of this yet, but this doesn't seem to be anything to do with RadioSet in particular. The same effect can be achieved with Label or Button, for example.

from textual.

I wonder if this is actually another instance of #4360.

from textual.

This looks to me like the effect of a widget with 100% width (i.e. the Input) inside a container with a width of 1fr?

Here's a slighlly reduced example. Compare before and after uncommenting the CSS on line 16:

from textual.containers import Container, ScrollableContainer
from textual.widgets import Input, Button

from textual.app import App, ComposeResult


class ExampleApp(App):
    CSS = """
    #outer {
        border: solid red;
    }

    #inner {
        margin-right: 20;
        border: solid blue;
        /* width: 100%; */
    }
"""

    def compose(self) -> ComposeResult:
        with ScrollableContainer(id="outer"):
            yield Button()
            with Container(id="inner"):
                yield Input()


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

from textual.

It took me a minute to figure out why changing the width then wasn't working in your example above, but it looks like your CSS was missing the parent selector like this:

class MyTabPane(TabPane):
    DEFAULT_CSS = """
    MyTabPane Grid {

I confess I don't understand why the rest of the CSS still seems to work though! I'm still not caught up on nested CSS so not sure if this might have revealed some sort of bug...?

from textual.

Honestly it looks like a workaround to me..., because what is the reason why width: 1fr causes the margin-right to not work properly? IMO it's a common case that a widget with width: 100% is mounted inside a container with width: 1fr and I don't see any reason why this margin would not work in this case. Please correct me if I am wrong.

from textual.

Yes, thanks for your help! I look forward to the solution.

from textual.

IMO, worth knowing, we observed this problem on version 0.52.1.

from textual.

Ahh, okay, likely not related then.

from textual.

Just to clarify, there was a change in this margin behaviour but back in v0.48.0 following #4037.

@jakubziebin I was only trying to clarify the likely cause with a MRE (as actually nothing to do with a RadioSet). I'm not saying this behaviour is correct or incorrect (and as you'll see from the discussion in the PR above, margin behaviour is a bit of a contentious issue!)

from textual.

I encountered one more strange behavior of the margin:

from textual.app import App, ComposeResult
from textual.widgets import Static, Input, Button
from textual.containers import Container


class MyContainer(Container):
    DEFAULT_CSS = """
    MyContainer {
        height: auto;
        #content {
            height: auto;
            background: $panel;
        }
    
        #container-with-button {
            align: center middle;
            height: auto;
        }
        
        Input {
            margin-bottom: 1;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with Container(id="content"):
            yield Static("Example static")
            yield Input()
            with Container(id="container-with-button"):
                yield Button("Click me")


class MyApp(App):
    def compose(self) -> ComposeResult:
        yield MyContainer()


MyApp().run()

Part of the button is cut off because of the bottom margin of the input. I wasn't sure if this should be posted in another issue, but I thought it was somewhat related, let me know if it should be converted to another issue.

from textual.

Part of the button is cut off because of the bottom margin of the input.

I don't think it is the margin. If you try deleting the CSS for the Input from your example, you'll see the button is still cut off.

Looks to me something about the middle alignment throwing off the sizing.

EDIT: Interestingly, if you add a second Button all seems to work as expected.

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


class ExampleApp(App):
    CSS = """
    #outer-container {
        height: auto;
        border: solid red;
    }

    #btn-container {
        /* align: center middle; */
        height: auto;
        border: solid blue;
    }
    """

    def compose(self) -> ComposeResult:
        with Container(id="outer-container"):
            with Container(id="btn-container"):
                yield Button()
                # yield Button()


if __name__ == "__main__":
    ExampleApp().run()

from textual.

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

from textual.