textual/docs/styles/visibility.md

Visibility

The visibility rule determines whether a widget is visible or not.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" visibility: hidden | visible; --8<-- "docs/snippets/syntax_block_end.md"

visibility takes one of two values to set the visibility of a widget.

Values

Value	Description
hidden	The widget will be invisible.
visible (default)	The widget will be displayed as normal.

Visibility inheritance

!!! note

Children of an invisible container _can_ be visible.

By default, children inherit the visibility of their parents. So, if a container is set to be invisible, its children widgets will also be invisible by default. However, those widgets can be made visible if their visibility is explicitly set to visibility: visible. This is shown in the second example below.

Examples

Note that the second widget is hidden, while leaving a space where it would have been rendered.

=== "Output"

```{.textual path="docs/examples/styles/visibility.py"}
```

=== "visibility.py"

```python
--8<-- "docs/examples/styles/visibility.py"
```

=== "visibility.css"

```sass
--8<-- "docs/examples/styles/visibility.css"
```

The next example shows the interaction of the visibility rule with invisible containers that have visible children. The app below has three rows with a Horizontal container per row and three placeholders per row. The containers all have a white background, and then:

• the top container is visible by default (we can see the white background around the placeholders);
• the middle container is invisible and the children placeholders inherited that setting;
• the bottom container is invisible but the children placeholders are visible because they were set to be visible.

=== "Output"

```{.textual path="docs/examples/styles/visibility_containers.py"}
```

=== "visibility_containers.py"

```python
--8<-- "docs/examples/styles/visibility_containers.py"
```

=== "visibility_containers.css"

```sass hl_lines="2-3 6 8-10 12-14 16-18"
--8<-- "docs/examples/styles/visibility_containers.css"
```

1. The padding and the white background let us know when the `Horizontal` is visible.
2. The top `Horizontal` is visible by default, and so are its children.
3. The middle `Horizontal` is made invisible and its children will inherit that setting.
4. The bottom `Horizontal` is made invisible...
5. ... but its children override that setting and become visible.

CSS

/* Widget is invisible */
visibility: hidden;

/* Widget is visible */
visibility: visible;

Python

# Widget is invisible
self.styles.visibility = "hidden"

# Widget is visible
self.styles.visibility = "visible"

There is also a shortcut to set a Widget's visibility. The visible property on Widget may be set to True or False.

# Make a widget invisible
widget.visible = False

# Make the widget visible again
widget.visible = True