textual/docs/styles/visibility.md

Visibility

The visibility rule may be used to make a widget invisible while still reserving spacing for it. The default value is "visible" which will cause the Widget to be displayed as normal. Setting the value to "hidden" will cause the Widget to become invisible.

Syntax

visibility: [hidden|visible];

Example

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

=== "visibility.py"

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

=== "visibility.css"

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

=== "Output"

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

CSS

/* Widget is on screen */
visibility: visible;

/* Widget is not on the screen */
visibility: hidden;

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