Question regarding Layout

[mlafois]

Hello,

I'm trying to set a container layout in order that the upside and bottomside of the container have a fixed size (not percent) and the centreside (the red part of the snapshot) take the remaining place.

The only thing I've seen it's using % like : grid-rows : 15% 70% 15% but in this case the up and bottom parts are realtive not fixed.

I don't know if it is a lack of css knowledge or something else from me but if someone has and answer that help me to understand

Thanks

Mickael

Here under the login.py snippet :

import os

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


script_dir = os.path.dirname(__file__)
with open(os.path.join(script_dir, "css/dialogLogin.css"), "r") as file:
    CSS = file.read().rstrip()


class LoginDialog(App):
    DEFAULT_CSS = CSS
    idsuffix = "login"
    username = ""
    passwd = ""

    def compose(self) -> ComposeResult:
        yield Header()
        yield Horizontal(
            Vertical(
                Button("Continue", id=f"continuebutton{self.idsuffix}", disabled=True),
                Static(
                    f"",
                    id=f"confirmation{self.idsuffix}",
                ),
                Button("Cancel", variant="error", id=f"cancelbutton{self.idsuffix}"),
                id=f"buttonscontainer{self.idsuffix}",
            ),
            Container(
                Static(
                    f"BodyTitle",
                    id=f"dialogtitle{self.idsuffix}",
                ),
                Vertical(
                    Input(placeholder="Login", id=f"loginfield{self.idsuffix}"),
                    Input(
                        placeholder="Password",
                        id=f"passwdfield{self.idsuffix}",
                        password=True,
                    ),
                    id=f"mainbodycontainer{self.idsuffix}",
                ),
                Container(
                    Button("Login", id=f"loginbutton{self.idsuffix}", disabled=True),
                    id=f"buttonsbodycontainer{self.idsuffix}",
                ),
                id=f"bodycontainer{self.idsuffix}",
            ),
            id=f"dialogcontainer{self.idsuffix}",
        )
        yield Footer()


if __name__ == "login":
    app = LoginDialog()
    app.run()

And the dialogLogin.css :

#dialogcontainerlogin {
  layout: grid;
  overflow-y: auto;
  grid-columns: 1fr;
  grid-rows: 1fr;
  background: $surface;
  grid-size: 5;
  content-align: center middle;
}

#buttonscontainerlogin {
  width: 100%;
  height: 100%;
  content-align: center middle;
  background: $panel;
  border: mediumvioletred;
}

#buttonscontainerlogin > Button {
  width: 100%;
  background: $panel;
  color: white;
  border: none;
  border-top: tall $panel-lighten-2;
  border-bottom: tall $panel-darken-3;
  content-align: left middle;
  text-style: bold;
}

#buttonscontainerlogin > Button:focus {
  text-style: bold;
  color: white;
  background: rgb(148, 9, 97);
}

#buttonscontainerlogin > Button.-active {
  background: rgb(148, 9, 97);
  border-bottom: tall $panel-lighten-2;
  border-top: tall $panel-darken-2;
  tint: $background 30%;
}

#buttonscontainerlogin > Button:hover {
  border-top: tall $panel-lighten-1;
  background: mediumvioletred;
  color: $text;
}

#continuebuttonlogin {
  dock: top;
  height: 3;
}

#cancelbuttonlogin {
  dock: bottom;
  height: 3;
}

#bodycontainerlogin {
  layout: grid;
  grid-size: 1;
  grid-columns: 1fr;
  background: $panel;
  border: mediumvioletred;
  column-span: 4;
  /* grid-rows: 15% 70% 15%; */
}

#dialogtitlelogin {
  /* background: mediumvioletred; */
  background: blue;
  color: white;
  text-style: bold;
  margin: 0 0 1 0;
  height: 100;
  content-align: center middle;
}

#mainbodycontainerlogin {
  width: 100%;
  height: 100%;
  content-align: center middle;
  /* background: $surface; */
  background: red;
}

#buttonsbodycontainerlogin {
  /* dock: bottom; */
  /* background: $panel; */
  background: green;
  height: 100%;
}

[davep]

If I've understood the basics of what you're trying to lay out, I think this is roughly what you're looking for?

from textual.app import App, ComposeResult
from textual.widgets import Footer
from textual.containers import Container

class LayoutTest( App[ None ] ):

    CSS="""
    #left {
        width: 20%;
        height: 100%;
        dock: left;
        border: solid grey;
        background: #555;
    }

    #top {
        height: 20;
        dock: top;
        border: solid grey;
        background: #555;
    }

    #body {
        border: dashed red;
        background: yellow;
    }

    #bottom {
        height: 20;
        dock: bottom;
        border: solid grey;
        background: #555;
    }
    """

    def compose(self) -> ComposeResult:
        yield Container(
            Container(id="left"),
            Container(
                Container(id="top"),
                Container(id="body"),
                Container(id="bottom")
            )
        )
        yield Footer()


LayoutTest().run()