Why are widgets automatically stretching horizontally/vertically in this case?

[otherjason]

I'm getting started using Textual for a simple TUI. In my case, I have a screen with an overall 2x2 grid layout and the right column has row-span: 2, so there are two panes on the left and one on the right. This is easy enough to accomplish using examples from the documentation. However, when I insert widgets into the grid cells, I'm getting unexpected layout behavior, causing widgets to stretch to fill the parent cell when I don't think I've told them to. Here's a pretty minimal example:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widget import Widget
from textual.widgets import Static

class Bar(Widget):
    DEFAULT_CSS = '''
    Bar {
        background: yellow 20%;
    }
    '''

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield Static('label1')
            yield Static('label2')        

class Foo(Widget):
    def compose(self) -> ComposeResult:
        yield Static('header label')
        yield Bar()

class Test(App):
    CSS = '''
    Screen {
        layout: grid;
        grid-size: 2;
        grid-columns: 1fr 2fr;
    }

    .box {
        border: solid green;
        height: 100%;
    }
   
    #right-pane {
        row-span: 2;
    }
    '''
    def compose(self) -> ComposeResult:
        with Container(classes = 'box'):
            yield Foo()
            yield Foo()
        yield Static('', classes = 'box', id = 'right-pane')
        yield Static('', classes = 'box')

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

And here's what the resulting window looks like:

This gets me the overall grid effect that I want. However, the content that I have started to populate in the upper-left pane doesn't lay out how I would expect it to. The Foo consists of a Static that is intended as an item header, vertically followed by a Bar that has a Horizontal layout containing two Statics. In my application this is more complex, but this is a minimal example. Note that the label1 Static has stretched to fill the entire grid pane, pushing the label2 Static out of the viewable area. This also pushes the Foo object that should be vertically next in the layout off of the bottom of the display.

I feel like I'm missing something fundamental here. The documentation suggests that widgets will not stretch vertically unless I explicitly tell it to, but it seems like the Statics are. My past experience with GUI frameworks gives me the intuition that, in the absence of specific sizing guidance, the widgets will adopt a natural height/width. I could potentially use fr units to make things share the available space, but what I would really prefer is for my widgets to use their natural size instead, regardless of the size of the encasing table cell.

[davep]

In your code above, the Statics aren't filling the space vertically, as you'll see if you add a border to them as a quick test:

What I imagine is happening here is that they're in need of some horizontal size styling. If you tweak your Bar widget to be more like:

class Bar(Widget):
    DEFAULT_CSS = '''
    Bar {
        background: yellow 20%;
    }

    Static {
        width: auto;
    }
    '''

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield Static('label1')
            yield Static('label2')

so that Static knows what to do horizontally you should get something like this:

[davep]

but the Bar inside the first Foo is filling the entire cell, bumping everything off

You're inheriting directly from Widget, which I believe lacks styling for height, which I think then in turn implies height: 100%. You may find that it makes more sense to either inherit from something like Vertical, or style your base widget with a more appropriate height; in his case height: 1fr might be more akin to what you're looking for.

People would normally inherit from Widget because they want to provide all the sensible defaults for DEFAULT_CSS; otherwise they would tend to start with one of the containers, or perhaps Static.

[otherjason]

Thanks for the suggestions, I'll give them a try in my more complicated example to make sure I'm understanding.

[otherjason]

I was able to solve the initial problem I described above by deriving Bar from Horizontal and setting height: auto on it. Now, the Foos and Bars have their natural size and stack as expected inside the grid pane. I changed that pane to be a VerticalScroll and that part works as expected.

I am now trying to apply these techniques to another subproblem that I had: in the larger grid pane on the right, I would like to do a similar thing, with DataTables interspersed with titles that are implemented with Statics. I'm having sort of the opposite problem here: I would like the DataTables to just stretch to however high is needed based on the number of rows that they have at any given time, then perform scrolling at the parent container level. Here's an example:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, Vertical, VerticalScroll
from textual.widget import Widget
from textual.widgets import DataTable, Static

class AutoStatic(Static):
    DEFAULT_CSS = '''
    AutoStatic {
        width: auto;
    }
    '''

class Bar(Horizontal):
    DEFAULT_CSS = '''
    Bar {
        background: yellow 20%;
        border: blue;
        height: auto;
    }
    
    Static {
        border: red;
    }
    '''

    def compose(self) -> ComposeResult:
        yield AutoStatic('label1')
        yield AutoStatic('label2')

class Foo(Static):
    DEFAULT_CSS = '''
    Foo {
        height: auto;
        border: white;        
    }
    '''
    def compose(self) -> ComposeResult:
        yield Static('header label')
        for i in range(4):
            yield Bar()

class MyTable(Static):
    DEFAULT_CSS = '''
    MyTable {
        height: auto;
        border: orange;
    }

    DataTable {
        height: auto;
        border: brown;
    }
    '''
    def compose(self) -> ComposeResult:
        yield AutoStatic('table title')
        t = DataTable()
        t.add_columns('col1', 'col2', 'col3')
        for i in range(5):
            t.add_row(f'{i}-0', f'{i}-1', f'{i}-2')
        yield t 

class Test(App):
    CSS = '''
    Screen {
        layout: grid;
        grid-size: 2;
        grid-columns: 1fr 2fr;
    }

    .box {
        border: solid green;
        height: 100%;
    }
   
    #right-pane {
        row-span: 2;
    }
    '''
    def compose(self) -> ComposeResult:
        with VerticalScroll(classes = 'box'):
            for i in range(4):
                yield Foo()
        with VerticalScroll(classes = 'box', id = 'right-pane'):
            for i in range(10):
                yield MyTable()

        yield Static('', classes = 'box')

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

Here's what it looks like:

The DataTables end up getting squished down so that their contents aren't visible at all. I suspect that there is some interaction withthe fact that the tables are themselves scrollable when needed, but I'm looking for how to make a table just be the height that it needs. I suppose I could accomplish a similar goal with just a Grid of Statics (I do not need the large-dataset capability that DataTable has), but I'm trying to explore the most idiomatic approach.

[willmcgugan]

It's not intuitive, but the reason that there is no space for the tables is that they have max-height: 100%, which doesn't work well with auto height.

We will have a better solution in the future, for now you can work around it by setting a different value for max-height, e.g. max-height: 100vh

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, Vertical, VerticalScroll
from textual.widget import Widget
from textual.widgets import DataTable, Static


class AutoStatic(Static):
    DEFAULT_CSS = """
    AutoStatic {
        width: auto;
    }
    """


class Bar(Horizontal):
    DEFAULT_CSS = """
    Bar {
        background: yellow 20%;
        border: blue;
        height: auto;
    }
    
    Static {
        border: red;
    }
    """

    def compose(self) -> ComposeResult:
        yield AutoStatic("label1")
        yield AutoStatic("label2")


class Foo(Static):
    DEFAULT_CSS = """
    Foo {
        height: auto;
        border: white;        
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("header label")
        for i in range(4):
            yield Bar()


class MyTable(Static):
    DEFAULT_CSS = """
    MyTable {
        height: auto;
        border: orange;
    }

    MyTable DataTable {
        height: auto;
        border: brown;
        max-height: 100vh;
    }
    """

    def compose(self) -> ComposeResult:
        yield AutoStatic("table title")
        t = DataTable()
        t.add_columns("col1", "col2", "col3")
        for i in range(5):
            t.add_row(f"{i}-0", f"{i}-1", f"{i}-2")
        yield t


class Test(App):
    CSS = """
    Screen {
        layout: grid;
        grid-size: 2;
        grid-columns: 1fr 2fr;
    }

    .box {
        border: solid green;
        height: 100%;
    }
   
    #right-pane {
        row-span: 2;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(classes="box"):
            for i in range(4):
                yield Foo()
        with VerticalScroll(classes="box", id="right-pane"):
            for i in range(10):
                yield MyTable()

        yield Static("", classes="box")


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

[otherjason]

Great, that works. Thank you!

[willmcgugan]

The Horizontal and other containers will stretch in both axis. They exist to divide the screen, so will use the available space given to them.

As Dave pointed out, it's your Statics with are sized to 100% width by default. If you have done any web dev, then Statics are like divs by default. But you can give them auto width to make them behave more like a span.

[otherjason]

OK, I didn't get that detail from the documentation. It may be worth stating that explicitly; the layout guide mentions that grid layouts are easier than nesting containers, but the fact that the containers will implicitly stretch both ways is unexpected in my opinion.