mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
fec73ba0e1
* 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
54 lines
1.1 KiB
Markdown
54 lines
1.1 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"
|
|
```
|
|
|
|
=== "scrollbar_gutter.css"
|
|
|
|
```scss
|
|
--8<-- "docs/examples/styles/scrollbar_gutter.css"
|
|
```
|
|
|
|
=== "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"
|
|
```
|