From 22351a7cfb7b79add69d537a2b7df5803ee28f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Thu, 15 Dec 2022 19:00:16 +0000
Subject: [PATCH] Add example to dock reference.

---
 docs/styles/dock.md | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/styles/dock.md b/docs/styles/dock.md
index 875358614..5a71eb6f9 100644
--- a/docs/styles/dock.md
+++ b/docs/styles/dock.md
@@ -5,10 +5,10 @@ The `dock` property is used to fix a widget to the edge of a container (which ma
 ## Syntax
 
 ```
-dock: top|right|bottom|left;
+dock: top | right | bottom | left;
 ```
 
-## Example
+## Examples
 
 The example below shows a `left` docked sidebar.
 Notice that even though the content is scrolled, the sidebar remains fixed.
@@ -30,6 +30,26 @@ Notice that even though the content is scrolled, the sidebar remains fixed.
     --8<-- "docs/examples/guide/layout/dock_layout1_sidebar.css"
     ```
 
+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.css"
+
+    ```css hl_lines="2-5 8-11 14-17 20-23"
+    --8<-- "docs/examples/styles/dock_all.css"
+    ```
+
 ## CSS
 
 ```sass