TabbedContent scrolling tabs out of view?

[hemna]

Hey there. I have a question regarding the scrolling view of the TabbedContent widget. It looks like scrolling of the content pane of the tab also induces a scrolling of the entire TabbedContent, such that the tabs scroll out of view as well. Is there anyway, to have the content of the tabs scroll, but not have the tabs themselves scroll out of view?

Here is my sample app. Switching to the green tab and scrolling, also scrolls the tabs away and you can't see them. I'd like the tabs to always stay visible and the content pane of the tabs is the only portion that scrolls.

Here is a screen recording showing the tabs scrolling out of view.

https://asciinema.org/a/zcqjFPGI3CGFtzZpVBNF1bP6f

Here is the sample code.

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


TXT = """
# Textual Markdown Browser

Welcome fellow adventurer! If you ran `markdown.py` from the terminal you are viewing `demo.md` with Textual's built in Markdown widget.

The widget supports much of the Markdown spec. There is also an optional Table of Contents sidebar which you will see to your left.

## Do You Want to Know More?

See [example.md](./example.md) for more examples of what this can do.
"""


class ColorTabsApp(App):
    CSS = """
    TabbedContent #--content-tab-green {
        color: green;
    }

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

    def compose(self) -> ComposeResult:
        long = short = TXT+TXT
        for i in range(0,10):
            long += TXT
        with TabbedContent():
            with TabPane("Red", id="red"):
                yield Markdown(short)
            with TabPane("Green", id="green"):
                yield Markdown(long)


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

[willmcgugan]

The default behavior of TabbedContent is to grow the height to fit the content. If it grows larger than the screen height, then the screen itself will scroll.

You can solve that by setting the TabbedContent to height: 1fr which will prevent the TabbedContent from growing larger than the screen. After that, you will need to place your Markdown in a VerticalScroll container to allow the markdown itself to scroll.

Which gives as the following:

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

TXT = """
# Textual Markdown Browser

Welcome fellow adventurer! If you ran `markdown.py` from the terminal you are viewing `demo.md` with Textual's built in Markdown widget.

The widget supports much of the Markdown spec. There is also an optional Table of Contents sidebar which you will see to your left.

## Do You Want to Know More?

See [example.md](./example.md) for more examples of what this can do.
"""


class ColorTabsApp(App):
    CSS = """
    TabbedContent {
        height: 1fr;
    }
    TabbedContent #--content-tab-green {
        color: green;
    }

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

    def compose(self) -> ComposeResult:
        long = short = TXT + TXT
        for i in range(0, 10):
            long += TXT
        with TabbedContent():
            with TabPane("Red", id="red"):
                with VerticalScroll():
                    yield Markdown(short)
            with TabPane("Green", id="green"):
                with VerticalScroll():
                    yield Markdown(long)


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

[hemna]

fantastic! Thank you. works like a charm!