ModalScreen background

[MuongKimhong]

As I have followed the documentation, when using modal screen it's supposed to show previous interface in background after push_screen() . https://textual.textualize.io/guide/screens/#modal-screens

I have the same code as doc but it doesn't show anything in background just blank with color.

class MyDialog(ModalScreen):
    yield Grid(
        Label("How was your day?", id="question"),
        Button("Good", variant="primary", id="good"),
        Button("Nahhh", variant="error", id="nah"),
        id="dialog"
    )


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        # some code
        
    def on_key(self, event):
        if event.key == "s":
            self.app.push_screen(MyDialog())


class Main(App):
    def on_mount(self, event) :
        # some code
        self.install_screen(MyScreen, "myscreen")
        self.push_screen("myscreen")

Is it because I use MyDialog in Screen MyScreen instead of Main app?

[ChrisBuilds]

MyDialog Is probably using the entire terminal. Set its dimensions via stylesheet and you’ll see the screen behind it.

You can see in the tcss pane of the ModalScreen example they have specified the dialog grid dimensions.

[MuongKimhong]

It works now. The problem was because I didn't set the background in MyDialog style which can be found via this https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#translucent-screens

MyDialog {
    align: center middle;
    background: $primary 30%;  <- missed this one
} 
#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;
}
#question {
    column-span: 2;
    height: 1fr;
    width: 1fr;
    content-align: center middle;
}
Button {
    width: 100%;
}

[davep]

It isn't necessary to set the background opacity yourself if you're inheriting from ModalDialog; what @ChrisBuilds says is the correct answer here. Take a look again at the example of using a ModalScreen and note that the only change is to the Python code, the CSS isn't changed and doesn't change the opacity.

You can verify this yourself if you look at the source for ModalScreen; it sets the opacity for you.

Your code above is working for you because you did what Chris said; you set the width and height of #dialog to be less than the screen behind it.

[MuongKimhong]

You're right! Thanks you so much.