77 lines
2 KiB
Markdown
77 lines
2 KiB
Markdown
# Overflow
|
|
|
|
The `overflow` rule specifies if and when scrollbars should be displayed.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
overflow: <a href="../../css_types/overflow"><overflow></a> <a href="../../css_types/overflow"><overflow></a>;
|
|
|
|
overflow-x: <a href="../../css_types/overflow"><overflow></a>;
|
|
overflow-y: <a href="../../css_types/overflow"><overflow></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.
|
|
|
|
### Defaults
|
|
|
|
The default setting for containers is `overflow: auto auto`.
|
|
|
|
!!! warning
|
|
|
|
Some built-in containers like `Horizontal` and `VerticalScroll` override these defaults.
|
|
|
|
## Example
|
|
|
|
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 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
|
|
--8<-- "docs/examples/styles/overflow.py"
|
|
```
|
|
|
|
=== "overflow.css"
|
|
|
|
```sass hl_lines="19"
|
|
--8<-- "docs/examples/styles/overflow.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Automatic scrollbars on both axes (the default) */
|
|
overflow: auto auto;
|
|
|
|
/* Hide the vertical scrollbar */
|
|
overflow-y: hidden;
|
|
|
|
/* Always show the horizontal scrollbar */
|
|
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"
|
|
```
|