mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
9eea01f5a1
* Add scrollbar-gutter docs * Add scrollbar-gutter docs * Add syntax and values section * Rewording
48 lines
1.0 KiB
Markdown
48 lines
1.0 KiB
Markdown
# 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"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/scrollbar_gutter.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Reserve space for vertical scrollbar */
|
|
scrollbar-gutter: stable;
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
self.styles.scrollbar_gutter = "stable"
|
|
```
|