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
|
# Dock
The `dock` style is used to fix a widget to the edge of a container (which may be the entire terminal window).
## Syntax
```
dock: bottom | left | right | top;
```
The option chosen determines the edge to which the widget is docked.
## Examples
### Basic usage
The example below shows a `left` docked sidebar.
Notice that even though the content is scrolled, the sidebar remains fixed.
=== "Output"
```{.textual path="docs/examples/guide/layout/dock_layout1_sidebar.py" press="pagedown,down,down"}
```
=== "dock_layout1_sidebar.py"
```python
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.py"
```
=== "dock_layout1_sidebar.tcss"
```css hl_lines="2"
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.tcss"
```
### Advanced usage
The second example shows how one can use full-width or full-height containers to dock labels to the edges of a larger container.
The labels will remain in that position (docked) even if the container they are in scrolls horizontally and/or vertically.
=== "Output"
```{.textual path="docs/examples/styles/dock_all.py"}
```
=== "dock_all.py"
```py
--8<-- "docs/examples/styles/dock_all.py"
```
=== "dock_all.tcss"
```css hl_lines="2-5 8-11 14-17 20-23"
--8<-- "docs/examples/styles/dock_all.tcss"
```
## CSS
```css
dock: bottom; /* Docks on the bottom edge of the parent container. */
dock: left; /* Docks on the left edge of the parent container. */
dock: right; /* Docks on the right edge of the parent container. */
dock: top; /* Docks on the top edge of the parent container. */
```
## Python
```python
widget.styles.dock = "bottom" # Dock bottom.
widget.styles.dock = "left" # Dock left.
widget.styles.dock = "right" # Dock right.
widget.styles.dock = "top" # Dock top.
```
## See also
- The [layout guide](../guide/layout.md#docking) section on docking.
|
