DataTable is not displayed if inside TabbedContent

[Matteomt]

This is my test code that shows a simple DataTable is not working in TabbedContent.

from textual.app import App, ComposeResult
from textual.widgets import DataTable, TabbedContent, TabPane, Markdown


class UsersDataTable(DataTable):
    def __init__(self):
        super().__init__()
        self.add_column("ID")
        self.add_column("Name")
        for id, name in [
            ('1', 'Alice'),
            ('2', 'Bob'),
        ]:
            self.add_row(id, name)


class SuperAdminApp(App):
    TITLE = "Super-admin TUI"

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        with TabbedContent(initial="users"):
            with TabPane("Users", id="users"):
                yield UsersDataTable()  # This is not displayed
            with TabPane("Other tab", id="other"):
                yield Markdown("ok")  # This works
        yield UsersDataTable()  # This works. I can also remove this and the above does not work.


if __name__ == '__main__':
    app = SuperAdminApp()
    app.run()

[davep]

You may find this previous similar discussion useful.

[Matteomt]

I suspected something about automatic height being zero, so I tried adding self.styles.height = 30 in UsersDataTable but it changed nothing.

Now I changed it to self.styles.height = '1fr' and it solved my issue. Thanks @davep for the suggested discussion!