Content Disappearing on with nested width: auto widgets

[kraanzu]

Have you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed

Yes

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. Check it can run without modifications.

I'm not too sure what's happening here but I'm sharing it.
I'm trying to render a widget with CSS width: auto within a parent which also happens to have width: auto but the content is not visible.
I tried to make a reproducible snippet for this issue using the Label widget but interestingly found out that if I inherit class Label or Static for example, the content just loads fine

It will be helpful if you run the following command and paste the results:

textual diagnose

Textual Diagnostics

Versions

Name	Value
Textual	0.47.1
Rich	13.7.0

Python

Name	Value
Version	3.11.6
Implementation	CPython
Compiler	GCC 13.2.1 20230801
Executable	/home/kraanzu/Documents/termtyper/venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.6.2-arch1-1
Version	#1 SMP PREEMPT_DYNAMIC Mon, 20 Nov 2023 23:18:21 +0000

Terminal

Name	Value
Terminal Application	WezTerm (20230712-072601-f4abf8fd)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

Feel free to add screenshots and / or videos. These can be very helpful!

from rich.console import RenderableType
from textual.app import App, ComposeResult
from textual.widget import Widget
from textual.widgets import Label, Static
from textual.containers import Horizontal


class AutoHorizontal(Horizontal):
    DEFAULT_CSS = """
    AutoHorizontal {
        width: auto;
    }
    """


class MyWidget(Widget):
    DEFAULT_CSS = """
    MyWidget {
        height: auto;
        width: auto;
    }
    """

    def render(self) -> RenderableType:
        return "Custom Widget"


class MyApp(App):
    def compose(self) -> ComposeResult:
        with AutoHorizontal():
            yield MyWidget()
            yield MyWidget()
            yield MyWidget()


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

If you change the inheritance from Widget to Label for MyWidget, it'll work fine ❓
Not sure if this is expected but it is confusing if that's the case

[TomJGooding]

If you take a look at the source code for Static, you'll see there's a shrink attribute which is set to False.

This shrink attribute is True by default in the base Widget class, meaning the renderable will shrink to fill the container. Since your container doesn't have a explicit size, it won't be visible as it will shrink to nothing.

[kraanzu]

I see now, that works! :D
But I was lucky enough to discover that it works with the Static Widget. Maybe this should be added as a note or warning in the docs?

[TomJGooding]

Out of interest, why are you inheriting from Widget rather than Static? Obviously this code is just a MRE which is much appreciated, but it might be useful to understand the context.

The documentation about creating custom widgets does suggest using Static as a better starting point, although not because of this auto size issue. I think the guide for creating custom widgets could definitely could be improved, so your feedback would be helpful.

[kraanzu]

Out of interest, why are you inheriting from Widget rather than Static?

Well, There's no particular reason but Static is stated as a widget that holds static content that can be updated.
Widget is a general name that hints that it's a base class which you can build upon

Plus, the other widgets provided by textual such as Placeholder, Input, Button etc all inherit the base Widget class. These, I think (inbuilt compound widgets), serve as a great starting point when building complicated widgets

I hope that makes sense.

Also, It's been quite a while since I started building with textual before the documentation was even released so I guess it is also a habit to inherit from Widget haha

[rodrigogiraoserrao]

Like Tom points out, it was the fact that shrink was set to True that did this (Widget.shrink docs: https://textual.textualize.io/api/widget/#textual.widget.Widget.shrink).

None of the other widgets that inherit from Widget set width: auto, which is why this one looked different from the others.

Given that the issue of the disappearing content was solved by Tom's comment, I'll close this issue!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.