Replies: 1 comment · 1 reply
|
The pseudo-class you're after is The catch: Textual only has the descendant (space) and child ( Two ways around it, neither of which needs the extra reactive. If the placeholder can just be the empty container dressed up, style the container and give it a border title: def compose(self) -> ComposeResult:
items = Container(id="items")
items.border_title = "Nothing here yet"
yield items#items:empty {
border: round $panel;
align: center middle;
}
If you want a distinct placeholder widget, don't fight CSS for it. Toggle it in the same place you already add and remove children: self.query_one("#placeholder").display = not self.query_one("#items").childrenOne line, at a point you're already touching, no separate state to keep in sync. |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Hi,
I have a container widget and via certain user interactions on other widgets this container gets children added or removed.
Whenever there are no regular children in the container, like the first time it's mounted or whenever the last regular child is removed, I'd like to show a similar looking placeholder child instead.
My issue is that I can't figure out how to know when that's the case, at least not in a way that I'd consider more or less idiomatic.
I've looked at the code side but there doesn't seem to be a built-in way to let the container know when children are mounted or unmounted.
I've also looked at the CSS side but unfortunately there doesn't seem to be a
:notpseudo-class which I could use to hide the placeholder when it's not the first and last child.So, the only way I can currently think of is to keep state in a reactive and toggle the placeholder that way, but it seems a bit much overhead considering I don't really need this state for anything else.
Any ideas are much appreciated 🙏
All reactions