TextArea glitches inside Collapsible (parents with auto height not accomodating enough space)

[pycaw]

I have been struggling with not being able to properly displaying TextAreas inside Collapsible widgets. After many hours of testing I concluded that indeed this is probably not how it's supposed to work. Couldn't replicate with ListViews instead of Collapsibles and neither with other widgets inside Collapsible.

from textual.app import App, ComposeResult
from textual.highlight import highlight
from textual.widgets import Collapsible, Static, TextArea


class MyApp(App):
    CSS = """
    Screen {
        align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        # fmt: off
        yield from compose_glitch("A) text area cut                    ~ Where is the bottom of TextArea?")
        yield from compose_glitch("A) text area stretched              ~ Why is TextArea stretched here like so?")
        yield from compose_glitch("B) static cut                       ~ Where is key '48'?", reverse=True)
        yield from compose_glitch("B) static cut, text area stretched  ~ Where is key 'last'?", reverse=True)
        # fmt: on


def compose_glitch(glitch, reverse: bool = False):
    widgets = [
        Static(highlight(gen_text(glitch), language="yaml")),
        TextArea(gen_text(glitch), language="yaml", read_only=True, show_line_numbers=True),
    ]
    yield Collapsible(*(reversed(widgets) if reverse else widgets), title=glitch)


def gen_text(glitch):
    if "text area stretched" in glitch:
        return "\n".join(["first: null", "last: null"])
    return "\n".join(["first: null", *(f"{n}: {hex(n)}" for n in range(1, 48)), "last: null"])


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

Issue can be mitigated with setting a concrete height for either TextArea or Collapsible's Contents. But analysing Collapsible's and its components' CSS configs did not point me to any direction, it all seems to be "auto". But it doesn't do that right as these examples show.

It's tempting to think it's just one or two lines of error with the cuts but there can be more than that, I could replicate that reliable as of yet. Also, I have encountered where as if the virtual size of TextArea influenced a parent container's virtual size but I will attempt to post example of that maybe later.

[github-actions[bot]]

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

• How do I center a widget in a screen?

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

[willmcgugan]

How tall do you want your TextAreas to be?

[pycaw]

How tall do you want your TextAreas to be?

And their containers you might ask. I would want them not cut, and not having adjacent widgets cut somehow either, that's for sure. Otherwise, they seem to incorporate view height by default in their max size. As they appear inside ListItems that looks just fine as well.

[pycaw]

How tall do you want your TextAreas to be?

But we are discussing default behavior here which I tried to research but then found inconsistencies.

[pycaw]

Ahm... How is this not a bug? Collapsible's Contents class is misinforming parent widgets about its size if there are certain types of widgets in it. Both with its height on the default setting and on auto.

[willmcgugan]

If you are in any doubt, look at the TextArea's css (self.log(text_area.css)). The default height for TextAreas is 1fr. Which means "use the remaining height". If the container has height auto, such as in Collapsible, then it will only allow the minimum number of lines for the TextArea.

Set your TextAreas to the height you wish them to be.

[willmcgugan]

ListView does not have a height of auto.

What you are seeing is a logic consequence of the CSS.

from textual.app import App, ComposeResult
from textual.reactive import var
from textual.widgets import Static, Footer
from textual import containers


class MyApp(App):
    BINDINGS = [("a", "add_line", "Add line")]
    CSS = """
    #a {
        height: auto;
        border: solid magenta;
    }
    #b {
        height: 1fr;
        border: solid green;
    }
    #container {        
        height: auto;
    }
    """
    lines = var(0)

    def compose(self) -> ComposeResult:
        with containers.VerticalGroup(id="container"):
            yield Static("", id="a")
            yield Static("Hello\nWorld\n", id="b")
        yield Footer()

    def on_mount(self) -> None:
        self.query_one("#a").border_title = "Height auto"
        self.query_one("#b").border_title = "Height 1fr"

    def action_add_line(self) -> None:
        self.lines += 1
        self.query_one("#a", Static).update(
            "\n".join([f"Line #{line}" for line in range(self.lines)])
        )


MyApp().run()

[pycaw]

Thanks for the example, along with what you told earlier fr sizing behavior in conjunction with "non-fr based sizes" is clear now. But what explains our sweet TextArea's bottom cut in this scenario, when all contents have 1fr within Contents and their parents all have auto:

from textual.app import App, ComposeResult
from textual.highlight import highlight
from textual.widgets import Collapsible, Static, TextArea


class MyApp(App):
    CSS = """
    Collapsible {
        height: auto;  # redundant
    }
    Contents {
        border: round $foreground 20%;
        margin: 1;
        padding: 0;
        & > Static {
            height: 1fr;
        }
    }
    TextArea {
        height: 1fr;  # redundant
        border: round $foreground 20%;
        padding: 0;
        margin: 1;
    }
    """

    def compose(self) -> ComposeResult:
        yield from compose_glitch("A) text area/Contents cut")


def compose_glitch(glitch, reverse: bool = False):
    with Collapsible(title=glitch):
        yield Static(highlight(gen_text(), language="yaml"))
        yield TextArea(gen_text(), language="yaml", read_only=True, show_line_numbers=True)


def gen_text():
    return "\n".join(["first: null", *(f"{n}: {hex(n)}" for n in range(1, 48)), "last: null"])


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

[pycaw]

Why close the issue/discussion? Someone else might still want to answer this behavior.

I am still not convinced how these are not bugs, the fact that widgets with auto height can cut its contents bottoms. auto is supposed to mean it will accomodate a widget in it with 1fr or two with 1fr each. Or I must be misunderstanding something that is not apparent from the docs.

[willmcgugan]

I suggest you enable scrolling on your containers to see what is going on. If you want further help i will need a use-case. And not another "I don't understand this, therefore it is broken". I have unsubscribed from this discussion.

[pycaw]

I suggest you enable scrolling on your containers to see what is going on. If you want further help i will need a use-case. And not another "I don't understand this, therefore it is broken". I have unsubscribed from this discussion.

Splendid. Maybe the next guy who spends days debugging this will enlighten me. Thanks for the help so far anyways.