Skip to content


The scrollbar-gutter style allows reserving space for a vertical scrollbar.


scrollbar-gutter: auto | stable;


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

Setting the value to stable prevents unwanted layout changes when the scrollbar becomes visible, whereas the default value of auto means that the layout of your application is recomputed when a vertical scrollbar becomes needed.


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

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.

from 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.tcss")
Screen {
    scrollbar-gutter: stable;

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


scrollbar-gutter: auto;    /* Don't reserve space for a vertical scrollbar. */
scrollbar-gutter: stable;  /* Reserve space for a vertical scrollbar. */


self.styles.scrollbar_gutter = "auto"    # Don't reserve space for a vertical scrollbar.
self.styles.scrollbar_gutter = "stable"  # Reserve space for a vertical scrollbar.