Skip to content

Scrollbar-gutter

The scrollbar-gutter rule allows authors to reserve space for the vertical scrollbar.

Setting the value to stable prevents unwanted layout changes when the scrollbar becomes visible.

Syntax

scrollbar-gutter: [auto|stable];

Values

Value Description
auto (default) No space is reserved for the vertical scrollbar.
stable Space is reserved for the vertical scrollbar.

Example

In the example below, notice the gap reserved for the scrollbar on the right side of the terminal window.

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

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class ScrollbarGutterApp(App):
    def compose(self):
        yield Static(TEXT, id="text-box")


app = ScrollbarGutterApp(css_path="scrollbar_gutter.css")
Screen {
    scrollbar-gutter: stable;
}

#text-box {
    color: floralwhite;
    background: darkmagenta;
}

ScrollbarGutterApp I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.

CSS

/* Reserve space for vertical scrollbar */
scrollbar-gutter: stable;

Python

self.styles.scrollbar_gutter = "stable"