Content height of markdown does not take border/padding into account

[I-Al-Istannen]

Description

The auto height of a Label with a markdown element in it is wrong if the label is subject to padding (and sometimes a border is enough too). I couldn't reproduce it without wrapping it in a Tab, but that might be lack of imagination on my part.

As the content height is wrong, no scrollbar appears either and I could not not coax it into displaying any. The content is just silently truncated and lost to the aether.

Diagnose

Expand for diagnosis

Versions

Name	Value
Textual	0.58.1
Rich	13.7.1

Python

Name	Value
Version	3.12.3
Implementation	CPython
Compiler	GCC 13.2.1 20240417
Executable	/home/i_al_istannen/src/ctf/ctf-backend/admin-tui/.venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.8.9-arch1-2
Version	#1 SMP PREEMPT_DYNAMIC Tue, 07 May 2024 21:35:54 +0000

Terminal

Name	Value
Terminal Application	Alacritty
TERM	alacritty
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

Screenshots

Without padding

With padding

Code

from rich.markdown import Markdown
from textual.app import App, ComposeResult
from textual.containers import Grid, Vertical
from textual.widgets import Label, TabbedContent, TabPane


class FooApp(App):
    TITLE = "Demonstrator"

    CSS = """
        Screen {
            align: center middle;
        }
        
        #root {
            width: 60;
            height: 20;
            border: solid $accent;
        }
        .info-container {
            grid-rows: auto;
        }
        .value {
            padding: 0 2;
            border: tall $background;
        }
    """

    def compose(self) -> ComposeResult:
        with (Vertical(id="root")):
            with TabbedContent():
                with TabPane("Information"):
                    with Grid(classes="info-container"):
                        yield Label(Markdown(long_text()), classes="value")


def long_text() -> str:
    return "aaa naa aaaaa aaa aaaan, aaa\naaa, aaaa?\", aa aaa aaaaanaaa *anaaaaaaana* aaaaaaaa aaaaaana aaa aaaaa aa\naaa, aa *aaaaaaaaa* aaa aaaa, \"aaaa, an *aaaa* aaa aaaa, a aa\". \"aaaa, naa\naaaaaaaaaaa, aaa a aaaa aaaaaanaa aaaa aa a aaa!\", aaa anaaaa, aaaaa\naaaaaaaa aanaaaaa. \"Na! aaa naa. aaaaa. aa aaaaa naa. aaaaa aa na aaa.\",\naaa aaaaaaaa aaaanaaaaa DONE.\n"

[github-actions]

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

• No widget called TextLog

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

This is an automated reply, generated by FAQtory

[davep]

From what I can see with your example, the same effect happens without wrapping the long_text result in a Rich Markdown. ¹

As the content height is wrong, no scrollbar appears either and I could not not coax it into displaying any.

A Label won't start adding scrollbars to itself.

I've not really dived into this, but the minimal version of what you're seeing seems to be this:

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.widgets import Label


def long_text() -> str:
    return "aaa naa aaaaa aaa aaaan, aaa\naaa, aaaa?\", aa aaa aaaaanaaa *anaaaaaaana* aaaaaaaa aaaaaana aaa aaaaa aa\naaa, aa *aaaaaaaaa* aaa aaaa, \"aaaa, an *aaaa* aaa aaaa, a aa\". \"aaaa, naa\naaaaaaaaaaa, aaa a aaaa aaaaaanaa aaaa aa a aaa!\", aaa anaaaa, aaaaa\naaaaaaaa aanaaaaa. \"Na! aaa naa. aaaaa. aa aaaaa naa. aaaaa aa na aaa.\",\naaa aaaaaaaa aaaanaaaaa DONE.\n"

class LongLabelApp(App[None]):

    CSS = """
    Grid {
        width: 60;
        border: solid red;
    }
    """
    def compose(self) -> ComposeResult:
        with Grid():
            yield Label(long_text())

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

and it seems to be fixed with:

--- long_label.py-orig	2024-05-19 12:29:34
+++ long_label.py	2024-05-19 12:29:47
@@ -16,7 +16,7 @@
     """
     def compose(self) -> ComposeResult:
         with Grid():
-            yield Label(long_text())
+            yield Label(long_text(), shrink=True)
 
 if __name__ == "__main__":
     LongLabelApp().run()

Footnotes

1. As an side: you might want to note that Textual has a Markdown widget. ↩

[I-Al-Istannen]

Thank you a lot for the quick reply :)

A Label won't start adding scrollbars to itself.

Yea, I found that out a while ago when looking through the issues. I have tried setting the overflow property, or wrapping it in a container that does (as suggested by an issue here somewhere, but I've found that quite a while ago and can not recall it). That doesn't work either. An empty scrollbar appears, but the content is lost anyways.

I've not really dived into this, but the minimal version of what you're seeing seems to be this:

That is a very cute reduction! It seems to be incomplete though, or expose a different problem.

and it seems to be fixed with:

This sadly does not fix my original code and neither does it fix my PoC in the offpost. So something else seems to be going on that isn't covered by your reduction.

---

As an side: you might want to note that Textual has a Markdown widget.

That sadly adds a random newline at the beginning and end I couldn't figure out how to get rid off, as well as some padding and margins (which I did get rid off). The theme also doesn't quite match, but that would likely be fixable if I had a closer look. I ruled it out after failing to remove the extranous whitespace. It does display all the code though.

[davep]

That is a very cute reduction! It seems to be incomplete though, or expose a different problem.

It very much seems to be the same symptom, with "I couldn't reproduce it without wrapping it in a Tab, but that might be lack of imagination on my part in mind I was hoping it would be possible to narrow the problem you're seeing down to the bare minimum code. From what I can see that's much of the DOM stripped, and some of the styling stripped, while still retaining the same symptom you're seeing.

While toggling the value of shrink on Label might be an accidental fix for the MRE I whittled things down to, I think it would be a good idea to first find the most minimal example of the problem.

Aside: if you've run into styling issue with Textual's Markdown widget I'd very much encourage heading over the the discussions section and seeking input; I'm sure someone will be happy to help you narrow that down.

[willmcgugan]

This looks like an issue with grid. Fix incoming.

[willmcgugan]

Fixed in 0.61.1

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[I-Al-Istannen]

It very much seems to be the same symptom, with "I couldn't reproduce it without wrapping it in a Tab, but that might be lack of imagination on my part in mind I was hoping it would be possible to narrow the problem you're seeing down to the bare minimum code. From what I can see that's much of the DOM stripped, and some of the styling stripped, while still retaining the same symptom you're seeing.

And you seem to have been correct with that assessment :P I wasn't sure if that was the same problem or not and wanted to at least mention that. My example was already reduced a lot from my original code, but I didn't find any straightforward further reduction with the same symptoms (contrary to you) :)

Aside: if you've run into styling issue with Textual's Markdown widget I'd very much encourage heading over the the discussions section and seeking input; I'm sure someone will be happy to help you narrow that down.

The Label(Markdown) is totally adequate for my usecase right now, but I will keep that in mind. Thanks :)

---

Fixed in 0.61.1

That also works on my real code! Thank you so much :)