alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Review reference for scrollbar-gutter.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2023-01-05 11:21:31 +00:00
parent c81a046c0c
commit 73621b6867
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/styles/scrollbar_gutter.md
View File

@@ -1,27 +1,32 @@
# 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.
The `scrollbar-gutter` rule allows reserving space for a vertical scrollbar.
## Syntax
```
scrollbar-gutter: [auto|stable];
```
--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 the vertical scrollbar. |
| `stable` | Space is reserved for the vertical scrollbar. |
| 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
@@ -30,24 +35,20 @@ terminal window.
=== "scrollbar_gutter.css"
```scss
```scss hl_lines="2"
--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;
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 = "stable"
self.styles.scrollbar_gutter = "auto" # Don't reserve space for a vertical scrollbar.
self.styles.scrollbar_gutter = "stable" # Reserve space for a vertical scrollbar.
```