TabbedContent TabPane not rendered?

[hemna]

I am trying to dynamically add TabPanes with my own custom widget. My widget will yield several items, but nothing ever seems to render.

I have provided a simple example that shows that the TabPane should have a custom widget, but the contents of that widget are never rendered.

from textual.app import App, ComposeResult
from textual.widgets import Label, TabbedContent, TabPane, Static, Markdown
from textual.containers import Grid, Horizontal, VerticalScroll
from textual.widget import Widget


class Mine(Widget):

    CSS = """
    Mine {
        background: $background;
        color: $foreground;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static(f"This is a test!!! {self.id}")


class ColorTabsApp(App):
    CSS = """
    ColorTabsApp {
        background: $background;
    }

    TabbedContent #--content-tab-green {
        color: green;
    }

    TabbedContent #--content-tab-red {
        color: red;
    }
    """

    BINDINGS = [
        ("a", "add_panes", "Add panes"),
    ]

    def compose(self) -> ComposeResult:
        yield TabbedContent(id="mytabs")

    def action_add_panes(self) -> None:
        tabbed_content = self.query_one(TabbedContent)
        for i in range(1, 4):
            tabbed_content.add_pane(
                TabPane(
                    f"Tab{i}",
                    Mine(id=f"mine-{i}"),
                    name=f"mine-{i}",
                )
            )


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

As you can see. the tabs are shown, but there is nothing in the content area where the TabPane widget is supposed to be.

If I replace the creation of the TabPane child to Static("something here"). that gets rendered

why does this below code 'work', but a custom Widget doesn't?

def action_add_panes(self) -> None:
        tabbed_content = self.query_one(TabbedContent)
        for i in range(1, 4):
            tabbed_content.add_pane(
                TabPane(
                    f"Tab{i}",
                    Static(f"mine-{i}, id=f"mine-{i}"),
                    name=f"mine-{i}",
                )
            )

results in:

[TomJGooding]

Try adding a height to your custom widget. The problem is that TabPane has height: auto, so it currently has no content height to base its own height on.

[willmcgugan]

Yup. The default for Widget is to be as high as its container. But the container has height "auto" which makes it as high as its children. Setting the height of Mine to auto should make it work.

@hemna The attribute on widgets is DEFAULT_CSS, and not CSS.

[hemna]

got it working thanks. This is a chat app for ham radio APRS network in the terminal.

https://asciinema.org/a/jYT6DEoqeBRmDnf2VNsKnIxjr