How to make the widget Pretty can scroll ?

[Smalldy]

I found that no matter how long the text in Pretty is, the height of the control doesn't change. This causes the scrollbar not to activate when I place it in a ScrollableContainer.

Is there a way to make this work?

[willmcgugan]

The Pretty will indeed change its height to accomodate the content. Perhaps you can give us a short example that demonstrates the problem?

[Smalldy]

from textual.app import App, ComposeResult
from textual.containers import Vertical, Horizontal, ScrollableContainer
from textual.widgets import Static, Pretty, Button, Label, Header, Footer, Placeholder
from textual.reactive import reactive


class JsonViewer(Static):
    json_data = reactive({
        "hosts": [
            {
                "name": "name",
                "description": "a host",
                "username": "aaa",
                "password": "aaa",
                "ip_address": "192.168.2.109",
                "port": 22
            }
        ],
        "targets": [],
        "tasks": []
    }, layout=True)


    def watch_json_data(self, value_update) -> None:
        if not self.is_mounted:
            return None
        self.query_one("#pretty_json", Pretty).update(self.json_data)

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Label("preview")
            with ScrollableContainer().add_class('h_fr_1').add_class('outline_white'):
                yield Pretty(self.json_data, id="pretty_json").add_class('outline_white')
        with Horizontal().add_class('h_3c'):
            yield Button("IMPORT", id="import").add_class('w_50p')
            yield Button("EXPORT", id="export").add_class('w_50p')

    def on_button_pressed(self, event: Button.Pressed):
        if event.button.id == "import":
            json_data: dict = self.json_data
            json_data['targets'].append({
                "test": "test",
            })
            self.mutate_reactive(JsonViewer.json_data)
            pass

    def updateJsonData(self):
        self.mutate_reactive(JsonViewer.json_data)


class DeploymentGen(App):
    CSS_PATH = "app.tcss"
    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()
        with Horizontal():
            with Vertical().add_class("left_panel").add_class("outline_white"):
                yield JsonViewer()
            yield Placeholder().add_class("right_panel").add_class("outline_white")
        pass


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

click to add text

[Smalldy]

Here is tcss

.left_panel {
    width: 25%;
}

.right_panel {
    width: 1fr;
}
.h_fr_1 {
    height: 1fr;  
}

.w_fr_1 {
    width: 1fr;
}
.w_25p {
    width: 25%;
}

.w_50p {
    width: 50%;
}

.outline_white {
    outline: white;
    border: solid;
}

[willmcgugan]

What version of Textual are you running?

[Smalldy]

textual, version 0.82.0

[willmcgugan]

You may want to try upgrading, because your example has a scrollbar for me.

[Smalldy]

I will try

[Smalldy]

It's my mistake, There is a tcss in corner that I don't notic

#pretty_json {
    height: 1fr;
}

Thanks !