Can't seem to hide widget - neither via CSS, nor via `visible` attribute

Textual
#1

The following script

import logging

from rich.console import Console

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

logger = logging.getLogger(__name__)

console = Console()

class Dialog(Container):

    def compose(self) -> ComposeResult:
        self.content = Container(
            Label('This is in the dialog layer'),
            id="dialog",
        )
        yield self.content

DIALOG_LEFT = (console.width - 32) // 2
DIALOG_TOP = (console.height - 3) // 2

class MyApp(App):

    CSS = '''
    #dialog {
        content-align: center middle;
        border: solid brown;
        background: ansi_white;
        height: 3;
        width: 32;
    }
    #dialog Label {
        text-align: center;
        color: ansi_red;
    }
    Dialog {
        offset: %s %s;
        layer: dialog;
        visibility: hidden;
    }
    Screen {
        layers: base dialog;
    }
    ''' % (DIALOG_LEFT, DIALOG_TOP)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.dialog = Dialog()
        self.dialog.visible = False

    def compose(self):
        yield Container(Label('This is in the base layer'))
        yield self.dialog

app = MyApp()
app.run()

Even though the visibility of the Dialog widget should be hidden, it still shows - can anyone tell me why, and how to actually hide it? Here’s the display:
ss19

#2

So I don’t really know if this is the intended behavior, but from fooling around with your example it seems like setting visibility: hidden on a container only applies it to the container, not to it’s contents. So you’d need to have that set on each item contained all the way down.

For this particular case where you have sort of a “popover” dialog, you can get what you want using display: none instead. The main difference seems to be that visibility: hidden will reserve space for something even if it’s not rendered, but you don’t need that property in your example code.

(As an example of what I mean in the first paragraph, try adding visibility: hidden to the #disalog css. That hides the container but not the Label… Like, this css will work because it hides both the #dialog container and the contained Label.

    Label {
        visibility: hidden;
    }
    
    #dialog {
        content-align: center middle;
        border: solid brown;
        background: ansi_white;
        height: 3;
        width: 32;
        visibility: hidden;
    }
    #dialog Label {
        text-align: center;
        color: ansi_red;
    }
    Dialog {
        offset: %s %s;
        layer: dialog;
    }
    Screen {
        layers: base dialog;
    }`
``

I think using display: none on the top level container is still easiest though.
#3

Thanks, it looks like Will has logged a bug about the visibility not cascading to children since I posted this. Thanks for the display: none tip, though. Didn’t come across that in the examples, but perhaps I didn’t look hard enough.