A container with grid layout can't be set to height: auto

[davep]

Following on from this discussion, and from checking with @willmcgugan about the intended working, it looks like there's a bug where you can't make a grid container height: auto. As a test bit of code:

from typing             import Type
from textual.app        import App, ComposeResult
from textual.containers import Container, Horizontal, Vertical, Grid
from textual.widgets    import Header, Footer, Label
from textual.binding    import Binding

class GridHeightAuto( App[ None ] ):

    CSS = """
    #test-area {
        height: auto;
        border: solid red;
        height: auto;
    }

    Grid {
        grid-size: 3;
    }
    """

    BINDINGS = [
        Binding( "g", "grid", "Grid" ),
        Binding( "v", "vertical", "Vertical" ),
        Binding( "h", "horizontal", "Horizontal" ),
        Binding( "c", "container", "Container" )
    ]

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical( Label( "Select a container to test (see footer)" ), id="sandbox" )
        yield Footer()

    def build( self, out_of: Type[ Container | Grid | Horizontal | Vertical ] ) -> None:
        self.query( "#sandbox > *" ).remove()
        self.query_one( "#sandbox", Vertical ).mount(
            Label( "Here is some text before the grid" ),
            out_of( *[ Label( f"Cell #{n}" ) for n in range( 9 ) ], id="test-area" ),
            Label( "Here is some text after the grid" )
        )

    def action_grid( self ):
        self.build( Grid )

    def action_vertical( self ):
        self.build( Vertical )

    def action_horizontal( self ):
        self.build( Horizontal )

    def action_container( self ):
        self.build( Container )

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

The results are, Container:

Vertical:

Horizontal:

And Grid:

It would appear that all container layouts handle height: auto fine expect for grid.

[shuckc]

I've run into this issue where a grid layout with a dynamic number of rows is problematic to handle, as height: auto collapses it. In my case and with a hand from @davep I calculated a desired height dynamically and applied it to the grid in python code. https://gist.github.com/shuckc/5ec3c4fed5844252fb2f9bb91d63bf88

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.