1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
# Scrollbar-size
The `scrollbar-size` style defines the width of the scrollbars.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
scrollbar-size: <a href="../../css_types/integer"><integer></a> <a href="../../css_types/integer"><integer></a>;
# horizontal vertical
scrollbar-size-horizontal: <a href="../../css_types/integer"><integer></a>;
scrollbar-size-vertical: <a href="../../css_types/integer"><integer></a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `scrollbar-size` style takes two [`<integer>`](../css_types/integer.md) to set the horizontal and vertical scrollbar sizes, respectively.
This customisable size is the width of the scrollbar, given that its length will always be 100% of the container.
The scrollbar widths may also be set individually with `scrollbar-size-horizontal` and `scrollbar-size-vertical`.
## Examples
### Basic usage
In this example we modify the size of the widget's scrollbar to be _much_ larger than usual.
=== "Output"
```{.textual path="docs/examples/styles/scrollbar_size.py"}
```
=== "scrollbar_size.py"
```python
--8<-- "docs/examples/styles/scrollbar_size.py"
```
=== "scrollbar_size.tcss"
```css hl_lines="13"
--8<-- "docs/examples/styles/scrollbar_size.tcss"
```
### Scrollbar sizes comparison
In the next example we show three containers with differently sized scrollbars.
!!! tip
If you want to hide the scrollbar but still allow the container to scroll
using the mousewheel or keyboard, you can set the scrollbar size to `0`.
=== "Output"
```{.textual path="docs/examples/styles/scrollbar_size2.py"}
```
=== "scrollbar_size2.py"
```python
--8<-- "docs/examples/styles/scrollbar_size2.py"
```
=== "scrollbar_size2.tcss"
```css hl_lines="6 11 16"
--8<-- "docs/examples/styles/scrollbar_size2.tcss"
```
## CSS
```css
/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */
scrollbar-size: 10 4;
/* Set horizontal scrollbar to 10 */
scrollbar-size-horizontal: 10;
/* Set vertical scrollbar to 4 */
scrollbar-size-vertical: 4;
```
## Python
The style `scrollbar-size` has no Python equivalent.
The scrollbar sizes must be set independently:
```py
# Set horizontal scrollbar to 10:
widget.styles.scrollbar_size_horizontal = 10
# Set vertical scrollbar to 4:
widget.styles.scrollbar_size_vertical = 4
```
|
