mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00

Files

darrenburns fec73ba0e1 Docs content align (#700 )

* Docs for content-align, some bug fixes for it too

* Make the example output a little clearer

* Remove app.run() from content-align docs example

* Improve wording

* Move content-align and scrollbar-gutter docs exmaples to split css/py files

* Remove app.run() from scrollbar-gutter docs example

2022-08-19 15:35:31 +01:00

1.1 KiB

Raw Blame History

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.

=== "scrollbar_gutter.py"

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

=== "scrollbar_gutter.css"

```scss
--8<-- "docs/examples/styles/scrollbar_gutter.css"
```

=== "Output"

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

CSS

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

Python

self.styles.scrollbar_gutter = "stable"

1.1 KiB Raw Blame History