textual/docs/styles/display.md

Display

The display property defines if a Widget is displayed or not. The default value is "block" which will display the widget as normal. Setting the property to "none" will effectively make it invisible.

Syntax

display: [none|block];

Example

Note that the second widget is hidden by adding the "hidden" class which sets the display style to None.

=== "display.py"

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

=== "display.css"

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

=== "Output"

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

CSS

/* Widget is on screen */
display: block;

/* Widget is not on the screen */
display: none;

Python

# Hide the widget
self.styles.display = "none"

# Show the widget again
self.styles.display = "block"

There is also a shortcut to show / hide a widget. The display property on Widget may be set to True or False to show or hide the widget.

# Hide the widget
widget.display = False

# Show the widget
widget.display = True