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

53
docs/styles/overflow.md
View File

@@ -1,27 +1,35 @@
# Overflow
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).
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.
The `overflow` rule specifies if and when scrollbars should be displayed.
## Syntax
```
overflow: [auto|hidden|scroll];
overflow-x: [auto|hidden|scroll];
overflow-y: [auto|hidden|scroll];
```
--8<-- "docs/snippets/syntax_block_start.md"
overflow: <a href="../../css_types/overflow">&lt;overflow&gt;</a> <a href="../../css_types/overflow">&lt;overflow&gt;</a>;
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
| Value | Description |
|------------------|---------------------------------------------------------|
| `auto` (default) | Automatically show the scrollbar if content doesn't fit |
| `hidden` | Never show the scrollbar |
| `scroll` | Always show the scrollbar |
--8<-- "docs/snippets/type_syntax/overflow.md"
### Defaults
The default setting for containers is `overflow: auto auto`.
!!! warning
Some built-in containers like `Horizontal` and `Vertical` override these defaults.
## Example
@@ -30,6 +38,11 @@ Here we split the screen in to left and right sections, each with three vertical
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.
=== "Output"
```{.textual path="docs/examples/styles/overflow.py"}
```
=== "overflow.py"
```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"
```
=== "Output"
```{.textual path="docs/examples/styles/overflow.py"}
```
## CSS
```sass
@@ -62,11 +70,12 @@ overflow-x: scroll;
## Python
Overflow cannot be programmatically set for both axes at the same time.
```python
# Hide the vertical scrollbar
widget.styles.overflow_y = "hidden"
# Always show the horizontal scrollbar
widget.styles.overflow_x = "scroll"
```