mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
196d430582
Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.
55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
# Scrollbar-gutter
|
|
|
|
The `scrollbar-gutter` rule allows reserving space for a vertical scrollbar.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
scrollbar-gutter: auto | stable;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
### Values
|
|
|
|
| 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.
|
|
|
|
## Example
|
|
|
|
In the example below, notice the gap reserved for the scrollbar on the right side of the
|
|
terminal window.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/scrollbar_gutter.py"}
|
|
```
|
|
|
|
=== "scrollbar_gutter.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/scrollbar_gutter.py"
|
|
```
|
|
|
|
=== "scrollbar_gutter.css"
|
|
|
|
```sass hl_lines="2"
|
|
--8<-- "docs/examples/styles/scrollbar_gutter.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
scrollbar-gutter: auto; /* Don't reserve space for a vertical scrollbar. */
|
|
scrollbar-gutter: stable; /* Reserve space for a vertical scrollbar. */
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
self.styles.scrollbar_gutter = "auto" # Don't reserve space for a vertical scrollbar.
|
|
self.styles.scrollbar_gutter = "stable" # Reserve space for a vertical scrollbar.
|
|
```
|