[BUG] Pretty widget not visible with `width:auto` when in a wrapper that also has `width:auto`

[MatejManczal]

I tried to make a snug wrapper for multiple vertically laid out Pretty widgets but upon setting its and its containers widths to auto, the pretty widgets disappeared. In the attached image the left column showcases mentioned behavior, the right column showcases the same code with Labels instead of Pretty widgets for comparison

App: top-left

from textual.containers import Container, Vertical, Horizontal
from textual.widgets import Label, Pretty
from textual.app import App, ComposeResult


class Demo(App):
    CSS = """
    Vertical {
        background: blue;
        height: auto;
    }

    Pretty {
        width: auto;
        height: auto;
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Pretty('hello world')
            yield Pretty('hello world')
            yield Pretty('hello world')




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

App: bottom-left

from textual.containers import Container, Vertical, Horizontal
from textual.widgets import Label, Pretty
from textual.app import App, ComposeResult
from textual import events


class Demo(App):
    CSS = """
    Vertical {
        background: blue;
        height: auto;
        width: auto;
    }

    Pretty {
        width: auto;
        height: auto;
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Pretty('hello world')
            yield Pretty('hello world')
            yield Pretty('hello world')




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

App: top-right

from textual.containers import Container, Vertical, Horizontal
from textual.widgets import Label, Pretty
from textual.app import App, ComposeResult
from textual import events


class Demo(App):
    CSS = """
    Vertical {
        background: blue;
        height: auto;
    }

    Label {
        width: auto;
        height: auto;
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Label('hello world')
            yield Label('hello world')
            yield Label('hello world')




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

App: bottom-right

from textual.containers import Container, Vertical, Horizontal
from textual.widgets import Label, Pretty
from textual.app import App, ComposeResult
from textual import events


class Demo(App):
    CSS = """
    Vertical {
        background: blue;
        height: auto;
        width: auto;
    }

    Label {
        width: auto;
        height: auto;
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Label('hello world')
            yield Label('hello world')
            yield Label('hello world')




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

Textual Diagnostics

Versions

Name	Value
Textual	5.3.0
Rich	14.1.0

Python

Name	Value
Version	3.12.9
Implementation	CPython
Compiler	GCC 14.2.1 20250207
Executable	/home/matej/.pyenv/versions/3.12.9/envs/gsutil/bin/python

Operating System

Name	Value
System	Linux
Release	6.15.7-arch1-1
Version	#1 SMP PREEMPT_DYNAMIC Thu, 17 Jul 2025 21:05:29 +0000

Terminal

Name	Value
Terminal Application	Kitty
TERM	xterm-kitty
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=75, height=47
legacy_windows	False
min_width	1
max_width	75
is_terminal	True
encoding	utf-8
max_height	47
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• How do I fix WorkerDeclarationError?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This project is developed and maintained by Will McGugan. Consider sponsoring Will's work on this project (and others).

This is an automated reply, generated by FAQtory

[TomJGooding]

Try adding shrink = False to your Pretty widget:

        with VerticalGroup(id="container-wauto"):
            pretty = Pretty(EXAMPLE_OBJECT)
            # Ensure Rich renderable does not shrink below optimal size.
            pretty.shrink = False
            yield pretty

I think the problem is that the underlying Rich renderable in the Pretty widget is designed to wrap. When the width of both the widget and its container is auto, without this shrink = False the widget will just shrink to a width of zero.

Full example to demonstrate

from textual.app import App, ComposeResult
from textual.containers import VerticalGroup
from textual.widgets import Pretty

EXAMPLE_OBJECT = {
    "title": "Back to the Future",
    "releaseYear": 1985,
    "director": "Robert Zemeckis",
    "genre": "Adventure, Comedy, Sci-Fi",
    "cast": [
        {"actor": "Michael J. Fox", "character": "Marty McFly"},
        {"actor": "Christopher Lloyd", "character": "Dr. Emmett Brown"},
    ],
}


class ExampleApp(App):
    CSS = """
    VerticalGroup {
        border: thick $accent;
        margin-bottom: 1;
    }

    #container-w30 {
        width: 30;
    }

    #container-wauto {
        width: auto;
    }

    Pretty {
        width: auto;
        height: auto;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalGroup() as container:
            container.border_title = "Container (width=1fr)"
            yield Pretty(EXAMPLE_OBJECT)

        with VerticalGroup(id="container-w30") as container_w30:
            container_w30.border_title = "Container (width=30)"
            yield Pretty(EXAMPLE_OBJECT)

        with VerticalGroup(id="container-wauto") as container_wauto:
            container_wauto.border_title = "Container (width=auto)"
            pretty = Pretty(EXAMPLE_OBJECT)

            # Ensure Rich renderable does not shrink below optimal size.
            # pretty.shrink = False

            yield pretty


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

[MatejManczal]

I wanted to use the Pretty widget exactly because of how it wraps. I wanted the contents to wrap if the available screen space isn't enough. In your solution, the contents just continue to off-screen land.

Am I to take your response as confirmation of intended behavior? I'd already brought this up in the textual discord, where I, after proposing the following solution/workaround, was told I should just avoid the widget if it's having this issue

    pretty_texts = ["hello world", "ouchie", "pretty text stinks"]
    def compose(self) -> ComposeResult:

        wrapper = Vertical()
        wrapper.styles.width = min(
            self.size.width,
            max(*[len(s)+2 for s in self.pretty_texts])
        )
        with wrapper:
            for text in self.pretty_texts:
                yield Pretty(text)

    def on_resize(self):
        self.refresh(layout=True, recompose=True)

For clarity, I wasn't intending on using the Pretty widget for objects with nesting and so the content line length calculation is simple in this case. But of course, it would be favorable if the wrapping worked for all objects.

[MatejManczal]

just noticed a mistake, the wrapper width calculation should also take into account the position of the element and so self.size.width should be self.size.width - offset_from_the_left

[TomJGooding]

Am I to take your response as confirmation of intended behavior?

No, take it as someone just trying to help and explain a possible reason for this behaviour.

FWIW since you compared this to using Labels, if the screen isn't wide enough you'll see the exact same behaviour.

from textual.app import App, ComposeResult
from textual.containers import VerticalGroup
from textual.widgets import Label, Pretty

PRETTY_TEXTS = ["hello world", "ouchie", "pretty text stinks"]


class ExampleApp(App):
    CSS = """
    VerticalGroup {
        width: auto;
        border: thick $accent;
        margin-bottom: 1;
    }

    Pretty {
        width: auto;
        height: auto;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalGroup() as pretties_container:
            pretties_container.border_title = "Pretties"
            for text in PRETTY_TEXTS:
                pretty = Pretty(text)
                pretty.shrink = False
                yield pretty

        with VerticalGroup() as labels_container:
            labels_container.border_title = "Labels"
            for text in PRETTY_TEXTS:
                yield Label(text)


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

[github-actions]

I hope I solved your issue!

Consider sponsoring my work to continue to maintain and develop Textual.

• Will McGugan

[willmcgugan]

@MatejManczal I think you may have a misconception about how "width: auto" works. When the width is auto it will size the widget to fit the content, which may make it larger than the container. If you want it to wrap, you would need to give it a max-width.

[MatejManczal]

@willmcgugan I assumed the Screen component had max-width of the window's width as that's how the Pretty widget seemed to behave when yielded directly. The edge of the screen is what I wanted to trigger the wrapping when inside my snug container. Was I incorrect in that assumption?

If so, does that mean that the Pretty widget in this snippet is wrapping incorrectly? (assuming the window is thinner than the contents)

from textual.widgets import Label, Pretty
from textual.app import App, ComposeResult


class Demo(App):

    def compose(self) -> ComposeResult:
        yield Pretty('hello world')



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