diff --git a/docs/blog/posts/release0-6-0.md b/docs/blog/posts/release0-6-0.md
index 0a31b5a5b..d821d37cb 100644
--- a/docs/blog/posts/release0-6-0.md
+++ b/docs/blog/posts/release0-6-0.md
@@ -62,9 +62,9 @@ We have a new list view control to navigate and select items in a list. Items ca
The Placeholder widget was broken since the big CSS update. We've brought it back and given it a bit of a polish.
-Use this widget in place of custom widgets you have yet to build when designing your UI.
+Use this widget in place of custom widgets you have yet to build when designing your UI. The colors are automatically cycled to differentiate one placeholder rom the next. You can click a placeholder to cycle between its ID, size, and lorem ipsum text.
-```{.textual path="docs/examples/widgets/placeholder.py"}
+```{.textual path="docs/examples/widgets/placeholder.py" columns="100" lines="45"}
```
## Fixes
diff --git a/docs/examples/widgets/placeholder.py b/docs/examples/widgets/placeholder.py
index 0c6499842..c09e9c412 100644
--- a/docs/examples/widgets/placeholder.py
+++ b/docs/examples/widgets/placeholder.py
@@ -22,7 +22,7 @@ class PlaceholderApp(App):
Placeholder(variant="size", id="col3"),
id="c1",
),
- id="bot"
+ id="bot",
),
Container(
Placeholder(variant="text", id="left"),
diff --git a/src/textual/widgets/_placeholder.py b/src/textual/widgets/_placeholder.py
index 33ad25e0c..864d41c70 100644
--- a/src/textual/widgets/_placeholder.py
+++ b/src/textual/widgets/_placeholder.py
@@ -7,7 +7,6 @@ from ..containers import Container
from ..css._error_tools import friendly_list
from ..reactive import Reactive, reactive
from ..widget import Widget, RenderResult
-from ..widgets import Label
from .._typing import Literal
PlaceholderVariant = Literal["default", "size", "text"]
@@ -65,6 +64,7 @@ class Placeholder(Container):
DEFAULT_CSS = """
Placeholder {
align: center middle;
+ overflow: hidden;
}
Placeholder.-text {
@@ -73,6 +73,7 @@ class Placeholder(Container):
_PlaceholderLabel {
height: auto;
+ color: $text;
}
Placeholder > _PlaceholderLabel {
@@ -137,7 +138,7 @@ class Placeholder(Container):
"-size",
)
self._text_label = _PlaceholderLabel(
- _LOREM_IPSUM_PLACEHOLDER_TEXT,
+ "\n\n".join(_LOREM_IPSUM_PLACEHOLDER_TEXT for _ in range(5)),
"-text",
)
super().__init__(
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
index 1c4563f96..6e81f6c99 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
@@ -7617,146 +7617,145 @@
font-weight: 700;
}
- .terminal-2023532609-matrix {
+ .terminal-1880419378-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-2023532609-title {
+ .terminal-1880419378-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-2023532609-r1 { fill: #ebe0e9 }
- .terminal-2023532609-r2 { fill: #c5c8c6 }
- .terminal-2023532609-r3 { fill: #eee3e6 }
- .terminal-2023532609-r4 { fill: #f1e8e8 }
- .terminal-2023532609-r5 { fill: #f4ece5 }
- .terminal-2023532609-r6 { fill: #f4f3df }
- .terminal-2023532609-r7 { fill: #ecf3e6 }
- .terminal-2023532609-r8 { fill: #e5f3eb }
- .terminal-2023532609-r9 { fill: #dfeff1 }
- .terminal-2023532609-r10 { fill: #e2f1ef }
- .terminal-2023532609-r11 { fill: #e5f3eb;font-weight: bold }
- .terminal-2023532609-r12 { fill: #dfeff1;font-weight: bold }
- .terminal-2023532609-r13 { fill: #e3e8ef }
- .terminal-2023532609-r14 { fill: #dfecf1 }
- .terminal-2023532609-r15 { fill: #e3e8ef;font-weight: bold }
- .terminal-2023532609-r16 { fill: #e8e3ec }
- .terminal-2023532609-r17 { fill: #14191f }
+ .terminal-1880419378-r1 { fill: #ebe0e9 }
+ .terminal-1880419378-r2 { fill: #c5c8c6 }
+ .terminal-1880419378-r3 { fill: #eee3e6 }
+ .terminal-1880419378-r4 { fill: #f1e8e8 }
+ .terminal-1880419378-r5 { fill: #f4ece5 }
+ .terminal-1880419378-r6 { fill: #161501 }
+ .terminal-1880419378-r7 { fill: #0f1508 }
+ .terminal-1880419378-r8 { fill: #e5f3eb }
+ .terminal-1880419378-r9 { fill: #dfeff1 }
+ .terminal-1880419378-r10 { fill: #e2f1ef }
+ .terminal-1880419378-r11 { fill: #e5f3eb;font-weight: bold }
+ .terminal-1880419378-r12 { fill: #dfeff1;font-weight: bold }
+ .terminal-1880419378-r13 { fill: #e3e8ef }
+ .terminal-1880419378-r14 { fill: #dfecf1 }
+ .terminal-1880419378-r15 { fill: #e3e8ef;font-weight: bold }
+ .terminal-1880419378-r16 { fill: #e8e3ec }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- PlaceholderApp
+ PlaceholderApp
-
-
-
-
- Placeholder p2 here!
- This is a custom label for p1.
- #p4
- #p3#p5Placeholde
- r
-
- Lorem ipsum dolor sit
- 26 x 6amet, consectetur 27 x 6
- adipiscing elit. Etiam
- feugiat ac elit sit
-
-
- Lorem ipsum dolor sit amet,
- consectetur adipiscing elit. Etiam 40 x 6
- feugiat ac elit sit amet accumsan.
- Suspendisse bibendum nec libero quis
- gravida. Phasellus id eleifend
- ligula. Nullam imperdiet sem tellus,
- sed vehicula nisl faucibus sit amet.Lorem ipsum dolor sit amet,
- Praesent iaculis tempor ultricies. ▆▆consectetur adipiscing elit. Etiam ▆▆
- Sed lacinia, tellus id rutrum feugiat ac elit sit amet accumsan.
- lacinia, sapien sapien congue Suspendisse bibendum nec libero quis
+
+
+
+
+ Placeholder p2 here!
+ This is a custom label for p1.
+ #p4
+ #p3#p5Placeholde
+ r
+
+ Lorem ipsum dolor sit
+ 26 x 6amet, consectetur 27 x 6
+ adipiscing elit. Etiam
+ feugiat ac elit sit amet
+
+
+ Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Etiam 40 x 6
+ feugiat ac elit sit amet accumsan.
+ Suspendisse bibendum nec libero quis
+ gravida. Phasellus id eleifend ligula.
+ Nullam imperdiet sem tellus, sed
+ vehicula nisl faucibus sit amet. Lorem ipsum dolor sit amet,
+ Praesent iaculis tempor ultricies. Sedconsectetur adipiscing elit. Etiam
+ lacinia, tellus id rutrum lacinia, feugiat ac elit sit amet accumsan.
+ sapien sapien congue mauris, sit amet Suspendisse bibendum nec libero quis