Skip to content

Visibility

The visibility rule may be used to make a widget invisible while still reserving spacing for it.

Syntax

visibility: [visible|hidden];

Values

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

Example

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

from textual.app import App
from textual.widgets import Static


class VisibilityApp(App):
    def compose(self):
        yield Static("Widget 1")
        yield Static("Widget 2", classes="invisible")
        yield Static("Widget 3")


app = VisibilityApp(css_path="visibility.css")
Screen {
    background: green;
}
Static {             
    height: 5;        
    background: white;        
    color: blue;   
    border: heavy blue;     
}
Static.invisible {
    visibility: hidden;
}

VisibilityApp ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃Widget 1 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃Widget 3 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

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