Skip to content

Dock

The dock property is used to fix a widget to the edge of a container (which may be the entire terminal window).

Syntax

dock: top|right|bottom|left;

Example

The example below shows a left docked sidebar. Notice that even though the content is scrolled, the sidebar remains fixed.

DockLayoutExample Sidebarfor sticky headers, footers, and sidebars. Docking a widget removes it from the layout and fixes its  position, aligned to either the top, right, bottom, or left  edges of a container. Docked widgets will not scroll out of view, making them ideal  for sticky headers, footers, and sidebars. ▂▂ Docking a widget removes it from the layout and fixes its  position, aligned to either the top, right, bottom, or left  edges of a container. Docked widgets will not scroll out of view, making them ideal  for sticky headers, footers, and sidebars. Docking a widget removes it from the layout and fixes its ▁▁ position, aligned to either the top, right, bottom, or left  edges of a container. Docked widgets will not scroll out of view, making them ideal  for sticky headers, footers, and sidebars. Docking a widget removes it from the layout and fixes its 

from textual.app import App, ComposeResult
from textual.widgets import Static

TEXT = """\
Docking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.

Docked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.

"""


class DockLayoutExample(App):
    CSS_PATH = "dock_layout1_sidebar.css"

    def compose(self) -> ComposeResult:
        yield Static("Sidebar", id="sidebar")
        yield Static(TEXT * 10, id="body")


if __name__ == "__main__":
    app = DockLayoutExample()
    app.run()
#sidebar {
    dock: left;
    width: 15;
    height: 100%;
    color: #0f2b41;
    background: dodgerblue;
}

CSS

/* Dock the widget on the left edge of its parent container */
dock: left;

Python

# Dock the widget on the left edge of its parent container
widget.styles.dock = "left"