Scandinavian Layout Issues

[bphunter1972]

Consider any Scandinavian flag with the left 1/3 composed of two vertical blocks and the right 2/3 composed of 1 large block.

With context managers, you might do it this way:

    with Horizontal():
        with Vertical():
            yield Static("One", classes="left")
            yield Static("Two", classes="left", id="two")
        yield Static("Three", classes="right")

The box labeled "Three" will not show up on the screen.

However, if you yield box Three first, placing it instead on the left-hand side, it will show as advertised:

        with Horizontal():
            yield Static("Three", classes="right")
            with Vertical():
                yield Static("One", classes="left")
                yield Static("Two", classes="left", id="two")

I believe that this will make the Swedes very unpleasant, but I cannot say for certain as I am not Scandinavian.

I've included a complete example at the bottom.

Maybe this is a limitation of the containers that I didn't see in the documentation?

# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.15.1 |
| Rich    | 13.3.2 |

## Python

| Name           | Value                                                                              |
|----------------|------------------------------------------------------------------------------------|
| Version        | 3.8.10                                                                             |
| Implementation | CPython                                                                            |
| Compiler       | Clang 6.0 (clang-600.0.57)                                                         |
| Executable     | /Users/bphunter/Library/Caches/pypoetry/virtualenvs/gviz-AtLwRJRq-py3.8/bin/python |

## Operating System

| Name    | Value                                                                                           |
|---------|-------------------------------------------------------------------------------------------------|
| System  | Darwin                                                                                          |
| Release | 22.3.0                                                                                          |
| Version | Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64 |

## Terminal

| Name                 | Value              |
|----------------------|--------------------|
| Terminal Application | iTerm.app (3.4.19) |
| TERM                 | xterm-256color     |
| COLORTERM            | truecolor          |
| FORCE_COLOR          | *Not set*          |
| NO_COLOR             | *Not set*          |

## Rich Console options

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

---

Failing example:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import Static
from textual.widgets import Header


my_css = """
Static {
    content-align: center middle;
    layout: horizontal;
}

.left {
    background: blue;
    height: 1fr;
    width: 33%;
}

#two {
    background: yellow;
}

.right {
    background: white;
    height: 1fr;
    width: 66%;
}
"""


class SwedishFlag(App):
    CSS_PATH = "test.css"
    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]

    def compose(self) -> ComposeResult:
        "Create the layout"

        yield Header(show_clock=True)
        with Horizontal():
            yield Static("Three", classes="right")
            with Vertical():
                yield Static("One", classes="left")
                yield Static("Two", classes="left", id="two")


if __name__ == "__main__":
    app = SwedishFlag()
    app.run()

[davep]

Consider any Scandinavian flag with the left 1/3 composed of two vertical blocks and the right 2/3 composed of 1 large block.

I'm slightly confused by this description as the flags you mention don't appear to match the layout you say you're going for (you seem to mention 3 blocks, but a cross would suggest 4 blocks), but I'm going to go with the layout description and assume 2 blocks to the left, stacked vertically, with one block to the right, with a 1/3 to 2/3 split.

If I were to do that I'd probably start out like this:

from textual.app        import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets    import Header, Footer, Static

class ExampleLayout( App[ None ] ):

    CSS = """
    Static {
        border: round white;
        height: 1fr;
        width: 1fr;
    }

    #left {
        width: 1fr;
    }

    #right {
        width: 2fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with Horizontal():
            with Vertical( id="left" ):
                yield Static( "Top Left" )
                yield Static( "Bottom Left" )
            yield Static( "Right", id="right" )
        yield Footer()

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

[bphunter1972]

That's what I did, except that you set the id of the Vertical container to left, whereas I had distributed that id to both of its child Static containers. And I can see that when I do that, then the "Right" container does not show up.

I suppose that I can understand this, but not completely.

[davep]

What I did was use containers to size each region of the screen vertically, and then place content inside. That would normally be the best approach, I'd say.

[bphunter1972]

Ok, thanks!
This is what happens when hardware designers do layout. :)