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