Grid: can't align cell content

[Alphix]

Starting from the modal02.py example from the Screen docs, I've tried aligning the content of Grid cells.

In essence, I changed the CSS for the buttons, so that instead of having width 100%, they have width: 10 and min-width: 10. Both the Quit and Cancel buttons will then be smaller (so they don't fill up the whole width of the modal dialog) and left-aligned inside their respective cells, but I'd like the Quit button to be right-aligned.

No matter what I try (e.g. setting align or content-align on the Grid or the Buttons), I can't seem to make that work.

Am I missing something or is this not possible?

[davep]

Do you have a minimal stand-alone working example of what you're trying and isn't working for you? It's a lot easier to help if we know what you're doing.

[Alphix]

Sure, starting from this example:

modal02.py:

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.screen import ModalScreen
from textual.widgets import Button, Footer, Header, Label

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class QuitScreen(ModalScreen):
    """Screen with a dialog to quit."""

    def compose(self) -> ComposeResult:
        yield Grid(
            Label("Are you sure you want to quit?", id="question"),
            Button("Quit", variant="error", id="quit"),
            Button("Cancel", variant="primary", id="cancel"),
            id="dialog",
        )

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "quit":
            self.app.exit()
        else:
            self.app.pop_screen()


class ModalApp(App):
    """A app with a modal dialog."""

    CSS_PATH = "modal01.css"
    BINDINGS = [("q", "request_quit", "Quit")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Label(TEXT * 8)
        yield Footer()

    def action_request_quit(self) -> None:
        self.push_screen(QuitScreen())


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

modal01.css:

QuitScreen {
    align: center middle;
}

#dialog {
    grid-size: 2;
    grid-gutter: 1 2;
    grid-rows: 1fr 3;
    padding: 0 1;
    width: 60;
    height: 11;
    border: thick $background 80%;
    background: $surface;
	align: center middle;
}

#question {
    column-span: 2;
    height: 1fr;
    width: 1fr;
    content-align: center middle;
}

Button {
    /* width: 100%; */
    width: 10;
    min-width: 10;
}

Note: the only changes I've made are in Button in the CSS.

The output looks like this:

But I'd like the Quit button to be right-aligned (so Quit and Cancel essentially look centered)

[davep]

Thanks. I think, once you want to get into that degree of layout control, Grid might not be the easiest approach for that dialog. Here's how I'd go about it:

from textual.app import App, ComposeResult
from textual.containers import Vertical, Horizontal
from textual.screen import ModalScreen
from textual.widgets import Button, Footer, Header, Label

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class QuitScreen(ModalScreen):
    """Screen with a dialog to quit."""

    def compose(self) -> ComposeResult:
        with Vertical(id="dialog"):
            yield Label("Are you sure you want to quit?", id="question")
            with Horizontal(id="buttons"):
                yield Button("Quit", variant="error", id="quit")
                yield Button("Cancel", variant="primary", id="cancel")

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "quit":
            self.app.exit()
        else:
            self.app.pop_screen()


class ModalApp(App):
    """A app with a modal dialog."""

    CSS_PATH = "alphix_align.css"
    BINDINGS = [("q", "request_quit", "Quit")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Label(TEXT * 8)
        yield Footer()

    def action_request_quit(self) -> None:
        self.push_screen(QuitScreen())


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

QuitScreen {
    align: center middle;
}

#dialog {
    padding: 1 2;
    width: auto;
    height: auto;
    border: thick $background 80%;
    background: $surface;
}

#question {
    content-align: center middle;
}

#buttons {
    margin-top: 1;
    width: 1fr;
    height: auto;
    align: right middle;
}

Button {
    width: 10;
    min-width: 10;
}

Probably with a bit of space between the buttons, etc; but you get the idea.

[Alphix]

Thanks, I should've mentioned that I already had a working version using a mix of Horizontal and Vertical and I was trying to change it to use Grid 😄

Anyway, for anyone else reading, this is what I came up with:

from textual.app import App, ComposeResult
from textual.containers import Vertical, Horizontal
from textual.screen import ModalScreen
from textual.widgets import Button, Footer, Header, Label
from textual import events

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class QuitScreen(ModalScreen):
    """Screen with a dialog to quit."""

    def compose(self) -> ComposeResult:
        with Vertical(id="confirm"):
            yield Label("Are you sure you want to quit?", id="confirm-label")
            with Horizontal(id="confirm-buttons"):
                yield Button.success("Ok", name="ok", id="confirm-ok")
                yield Button.error("Cancel", name="cancel", id="confirm-cancel")

    def on_mount(self, event: events.Mount) -> None:
        self.query_one("#confirm-cancel", Button).focus()

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.name == "ok":
            self.app.exit()
        else:
            self.app.pop_screen()


class ModalApp(App):
    """A app with a modal dialog."""

    CSS_PATH = "dialog.css"
    BINDINGS = [("q", "request_quit", "Quit")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Label(TEXT * 8)
        yield Footer()

    def action_request_quit(self) -> None:
        self.push_screen(QuitScreen())


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

And the CSS:

QuitScreen {
	align: center middle;
	background: $background 60%;
}

#confirm {
	padding: 1;
	width: 80%;
	height: 7;
	border: thick $background 80%;
	background: $surface;
}

#confirm-label {
	content-align: center middle;
	width: 100%;
}

#confirm-buttons {
	margin-top: 1;
	align: center middle;
}

#confirm-buttons Button {
	min-width: 10;
	border-top: none;
	border-bottom: none;
	height: 1;
}

#confirm-ok {
	border-left: tall $success-lighten-2;
	border-right: tall $success-darken-3;
}

#confirm-cancel {
	border-left: tall $error-lighten-2;
	border-right: tall $error-darken-3;
}

Which gives this result: