Right and bottom gets cut from keyline when using auto for width and height

[tsvenson]

From my post on Discord / help-wanted I was asked to report this as a bug.

This is what happens when using ẁidth: auto; and height: auto; with keyline:

Using Python:

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

class KeylineApp(App):
    CSS_PATH = 'keyline.tcss'

    def compose(self) -> ComposeResult:
        with Grid():
            yield Placeholder("a")
            yield Placeholder("b")
            yield Placeholder("c")
            yield Placeholder("d")
            yield Placeholder("e")
            yield Placeholder("f")
            yield Placeholder("g")
            yield Placeholder("h")
            yield Placeholder("i")

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

CSS:

Grid {
    grid-size: 3 3;
    grid-gutter: 1;
    grid-columns: 2;
    grid-rows: 1;
    keyline: thin;
    width: auto;
    height: auto;
}

Just comment out the height/width and see the difference.

@davidfokkema did some digging and found:

It seems the docs suggest that the keyline is drawn into the margin so you should supply ample margins yourself. To me that reads like the widgets should not grow when you draw a keyline. But, in fact, it does on the top and left. It does not on the bottom and right. Furthermore, its only draw on the sides where the widget grows.

[github-actions[bot]]

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

• How can I select and copy text in a Textual app?
• Why do some key combinations never make it to my app?

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

[tsvenson]

Here is how it looks in my learning project, where stumbling on the keyline problem:

As seen, the right and bottom of the keyline is cut when the container is made to align center middle.

The code can be found here: https://github.com/tsvenson/tuithello

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.