alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor overflow reference.

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2023-01-04 11:26:01 +00:00
parent 8fd118c4bc
commit 56e5e39740
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/styles/overflow.md
View File

@@ -1,35 +1,48 @@
# Overflow # Overflow
The `overflow` rule specifies if and when scrollbars should be displayed on the `x` and `y` axis. The `overflow` rule specifies if and when scrollbars should be displayed.
The rule takes two overflow values; one for the horizontal bar (x-axis), followed by the vertical bar (y-axis).
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.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
overflow: [auto|hidden|scroll]; overflow: <a href="../../css_types/overflow">&lt;overflow&gt;</a> <a href="../../css_types/overflow">&lt;overflow&gt;</a>;
overflow-x: [auto|hidden|scroll];
overflow-y: [auto|hidden|scroll]; overflow-x: <a href="../../css_types/overflow">&lt;overflow&gt;</a>;
``` overflow-y: <a href="../../css_types/overflow">&lt;overflow&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `overflow` accepts two values that determine when to display scrollbars in a container widget.
The two values set the overflow for the horizontal and vertical axes, respectively.
Overflow may also be set individually for each axis:
- `overflow-x` sets the overflow for the horizontal axis; and
- `overflow-y` sets the overflow for the vertical axis.
### Values ### Values
| Value | Description | --8<-- "docs/snippets/type_syntax/overflow.md"
|------------------|---------------------------------------------------------|
| `auto` (default) | Automatically show the scrollbar if content doesn't fit | ### Defaults
| `hidden` | Never show the scrollbar |
| `scroll` | Always show the scrollbar | The default setting for containers is `overflow: auto auto`.
!!! warning
Some built-in containers like `Horizontal` and `Vertical` override these defaults.
## Example ## Example
Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal. Here we split the screen into left and right sections, each with three vertically scrolling widgets that do not fit into the height of the terminal.
The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar.
The right side has `overflow-y: hidden` which will prevent a scrollbar from being shown. The right side has `overflow-y: hidden` which will prevent a scrollbar from being shown.
=== "Output"
```{.textual path="docs/examples/styles/overflow.py"}
```
=== "overflow.py" === "overflow.py"
```python ```python
@@ -42,11 +55,6 @@ The right side has `overflow-y: hidden` which will prevent a scrollbar from bein
--8<-- "docs/examples/styles/overflow.css" --8<-- "docs/examples/styles/overflow.css"
``` ```
=== "Output"
```{.textual path="docs/examples/styles/overflow.py"}
```
## CSS ## CSS
```sass ```sass
@@ -62,11 +70,12 @@ overflow-x: scroll;
## Python ## Python
Overflow cannot be programmatically set for both axes at the same time.
```python ```python
# Hide the vertical scrollbar # Hide the vertical scrollbar
widget.styles.overflow_y = "hidden" widget.styles.overflow_y = "hidden"
# Always show the horizontal scrollbar # Always show the horizontal scrollbar
widget.styles.overflow_x = "scroll" widget.styles.overflow_x = "scroll"
``` ```