diff --git a/docs/examples/styles/background.py b/docs/examples/styles/background.py index 792cf4c85..90742620a 100644 --- a/docs/examples/styles/background.py +++ b/docs/examples/styles/background.py @@ -5,7 +5,7 @@ from textual.widgets import Static class BackgroundApp(App): CSS = """ Static { - height:1fr; + height: 1fr; content-align: center middle; color: white; } diff --git a/docs/styles/border.md b/docs/styles/border.md index 724aff236..413697893 100644 --- a/docs/styles/border.md +++ b/docs/styles/border.md @@ -16,11 +16,11 @@ The `border` rule enables the drawing of a box around a widget. A border is set | `"outer"` | Think solid border with additional space around content | | `"round"` | Rounded corners | | `"solid"` | Solid border | -| `"tall"` | A solid border with extras space top and bottom | +| `"tall"` | Solid border with extras space top and bottom | | `"vkey"` | Vertical key-line border | -| `"wide"` | A solid border with additional space left and right | +| `"wide"` | Solid border with additional space left and right | -For examples `heavy white` would display a heavy white line around a widget. +For example `heavy white` would display a heavy white line around a widget. Borders may also be set individually for the four edges of a widget with the `border-top`, `border-right`, `border-bottom` and `border-left` rules. diff --git a/docs/styles/outline.md b/docs/styles/outline.md index d475b9519..8d438a095 100644 --- a/docs/styles/outline.md +++ b/docs/styles/outline.md @@ -2,22 +2,27 @@ The `outline` rule enables the drawing of a box around a widget. Similar to `border`, but unlike border, outline will draw over the content area. This rule can be useful for emphasis if you want to display a outline for a brief time to draw the user's attention to it. -An outline is set with a border style (see below) followed by a color. +An outline is set with a border value (see below) followed by a color. -- `"ascii"` -- `"round"` -- `"solid"` -- `"double"` -- `"dashed"` -- `"heavy"` -- `"inner"` -- `"outer"` -- `"hkey"` -- `"vkey"` -- `"tall"` -- `"wide"` +| Border value | Explanation | +| ------------ | ------------------------------------------------------- | +| `"ascii"` | A border with plus, hyphen, and vertical bar | +| `"blank"` | A blank border (reserves space for a border) | +| `"dashed"` | Dashed line border | +| `"double"` | Double lined border | +| `"heavy"` | Heavy border | +| `"hidden"` | Alias for "none" | +| `"hkey"` | Horizontal key-line border | +| `"inner"` | Thick solid border | +| `"none"` | Disabled border | +| `"outer"` | Think solid border with additional space around content | +| `"round"` | Rounded corners | +| `"solid"` | Solid border | +| `"tall"` | Solid border with extras space top and bottom | +| `"vkey"` | Vertical key-line border | +| `"wide"` | Solid border with additional space left and right | -For examples `heavy white` would display a heavy white line around a widget. +For example `heavy white` would display a heavy white line around a widget. Outlines may also be set individually with the `outline-top`, `outline-right`, `outline-bottom` and `outline-left` rules. diff --git a/docs/styles/overflow.md b/docs/styles/overflow.md index 8429403a4..8d0adaf52 100644 --- a/docs/styles/overflow.md +++ b/docs/styles/overflow.md @@ -1,12 +1,16 @@ # Overflow -The `overflow` rule specifies if and when scrollbars should be displayed on the `x` and `y` axis. There are two values for each scrollbar, which may be set together or independently to one of the follow three values: +The `overflow` rule specifies if and when scrollbars should be displayed on the `x` and `y` axis. The rule takes two overflow values; one for the horizontal bar (x axis), followed by the vertical bar (y-axis). -- `"auto"` Automatically show the scrollbar if the content doesn't fit -- `"hidden"` Never show the scrollbar -- `"scroll"` Always show the scrollbar +| Overflow value | Effect | +| -------------- | ------------------------------------------------------------------------- | +| `"auto"` | Automatically show the scrollbar if the content doesn't fit (the default) | +| `"hidden"` | Never show the scrollbar | +| `"scroll"` | Always show the scrollbar | -The default is "auto" which will show the scrollbar if content doesn't fit within container, otherwise the scrollbar will be hidden. +The default value for overflow is `"auto auto"` which will show scrollbars automatically for both scrollbars if content doesn't fit within container. + +Overflow may also be set independently by setting the `overflow-x` rule for the horizontal bar, and `overflow-y` for the vertical bar. ## Example