Containers into ScrollableContainer

[vpet98]

Let's say I have a simple Container into a ScrollableContainer. Into the simple Container there might be a long list of widgets.

Having no restriction to the height of the simple Container, I would expect to see a scrollbar if the total height of the widgets' list surpasses the maximum height the ScrollableContainer can take. However, it seems that no scrollbar appears in such and similar cases.

[TomJGooding]

Could you possibly provide a minimal reproducible example? It would be useful to understand why you're using a container inside another scrollable container, and exactly how you would expect this to scroll.

[vpet98]

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, ScrollableContainer
from textual.widgets import Static, Label


class LongSimulator1(Static):
    def compose(self) -> ComposeResult:
        for i in range(10):
            yield Label(f"Widget for Container1")


class LongSimulator2(Static):
    def compose(self) -> ComposeResult:
        for i in range(10):
            yield Label(f"Widget for Container2")


class Application(App):
    DEFAULT_CSS = """
    ScrollableContainer {
      max-height: 5;
    }
    """

    def compose(self) -> ComposeResult:
        yield ScrollableContainer(
            Horizontal(
                Container(LongSimulator1()),
                Container(LongSimulator2())
            )
        )


if __name__ == "__main__":
    app = Application()
    app.run()

[vpet98]

In the above code only half of the Label items can be seen, while a scrollbar is required for the rest, since the ScrollableContainer has restriction in its height.

The thing is that both the Containers need to be scrolled simultaneously and not have one scrollbar for Container 1 and another scrollbar for Container 2. The latter would be possible if I had used HorizontalScroll instead of Horizontal and VerticalScroll instead of Containers.

[willmcgugan]

Containers have height: 1fr which means they will divide their space equally in their parent. If you want them to size to their contents, you will need to set height: auto;

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, ScrollableContainer
from textual.widgets import Static, Label


class LongSimulator1(Static):
    def compose(self) -> ComposeResult:
        for i in range(10):
            yield Label(f"Widget for Container1 {i}")


class LongSimulator2(Static):
    def compose(self) -> ComposeResult:
        for i in range(10):
            yield Label(f"Widget for Container2 {i}")


class Application(App):
    CSS = """
    ScrollableContainer {
      max-height: 5;
    }
    Horizontal {
        height: auto;
    }
    Container {
        height: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield ScrollableContainer(
            Horizontal(Container(LongSimulator1()), Container(LongSimulator2()))
        )


if __name__ == "__main__":
    app = Application()
    app.run()