Spacing between widgets in a container

[aaronst]

I often only want margin between widgets. Almost like grid-gutter, but without the need for a grid layout.

+-------------------+
|+-----------------+| <- no space
||     widget      ||
|+-----------------+|
|                   | <- space
|+-----------------+|
||     widget      ||
|+-----------------+| <- no space
+-------------------+

Typically I want padding to dictate the space around the content of the container, but the addition of margin causes that space to be larger than desired. Is there a simple way to accomplish this?

[learnbyexample]

Have you tried setting margin-top and margin-bottom? See https://textual.textualize.io/styles/margin/

[willmcgugan]

No trivial way currently. You could set the margin to 0 for the first and last, but you would have to set those classes manually. We do plan on adding :first and :last pseudo selectors which would make this easier.

[aaronst]

I've been able to get away with:

if self.children:
    widget.styles.margin = (1, 0, 0, 0)

self.mount(widget)

but :first and :last will be fantastic.

[devraj]

Wondering if this made it to the later versions of textual?

[TomJGooding]

Wondering if this made it to the later versions of textual?

https://textual.textualize.io/guide/CSS/#pseudo-classes

[hellow554]

Sorry to resurrect this thread but I have the exact same question. I have opted for a nested horizontalgroup which seems to work?! Is there a better approach for this?

    @override
    def compose(self) -> ComposeResult:
        with HorizontalGroup():
            with HorizontalGroup():
                yield Label("FooBar")
            yield Button("↻", variant="warning")

[willmcgugan]

See the first-* and last-* psuedo-selectors https://textual.textualize.io/guide/CSS/#pseudo-classes

[hellow554]

Yeah, I saw that the pseudo classes were implemented but failed to achieve something with them.
Do you have a small css snippet you could provide?
In other frameworks you have a spacer widget which consumes the left over space for you.
If you specify expand=True on the label, the button vanishes. The code for that only sets the width to the container width, but does not respect other widgets on that container as well...

[willmcgugan]

If you want assistance, please write a fully working example that can be run without modification. And please open a new discussion. Or post on the Discord server...