TabbedContent – layout issue

[dragomirecky]

Hello!

First of all, amazing project 👏

I would like to start using it for some apps of mine but I quickly run into a layout issue.

My minimal example

from textual.app import App
from textual.widgets import TabbedContent, TabPane, Placeholder


class DiagnosticApp(App):
    def compose(self):
        with TabbedContent():
            with TabPane('PANE', id='pane'):
                yield Placeholder('pane content')


if __name__ == '__main__':
    app = DiagnosticApp()
    app.dark = False
    app.run()

Based on the examples on your site, I would expect to see the tab bar on the top and the rest of the screen filled with the "pane content" placeholder.

Instead, I see the tab bar only:

Do you have any suggestions?

[davep]

Does the workaround mentioned to the bottom of #2411 work for you?

[dragomirecky]

It does not

Giving the TabbedContent ContentSwitcher background color, I can see that adding/removing height: 1fr; changes their size. But either way, the Placeholder isn't visible.

[willmcgugan]

Placeholders don't have a default size by default. Try the following:

from textual.app import App
from textual.widgets import TabbedContent, TabPane, Placeholder


class DiagnosticApp(App):
    CSS = """
    Placeholder {
        height: 1;
    }
    """

    def compose(self):
        with TabbedContent():
            with TabPane("PANE", id="pane"):
                yield Placeholder("pane content")


if __name__ == "__main__":
    app = DiagnosticApp()
    app.dark = False
    app.run()

[dragomirecky]

Yep, that makes the Placeholder visible – height of one.

However, my goal is to make the children of the TabbedContent fill up the rest of the screen (in this minimal example the Placeholder; in reality – I want a ListView and some other things).

[willmcgugan]

from textual.app import App
from textual.widgets import TabbedContent, TabPane, Placeholder


class DiagnosticApp(App):
    CSS = """
    TabbedContent ContentSwitcher{
        height: 1fr;
    }
    Placeholder {
        height: 1fr;
    }
    """

    def compose(self):
        with TabbedContent():
            with TabPane("PANE", id="pane"):
                yield Placeholder("pane content")


if __name__ == "__main__":
    app = DiagnosticApp()
    app.dark = False
    app.run()

[dragomirecky]

thanks 🤦‍♂️ that's it 👍

[dragomirecky]

and kudos for the super quick help 👏