Merge pull request #1329 from Textualize/auto-width

Fix for auto dimensions on containers, with relative children.

Author: willmcgugan

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Type selectors can now contain numbers https://github.com/Textualize/textual/issues/1253
 - Fixed visibility not affecting children https://github.com/Textualize/textual/issues/1313
+- Fixed issue with auto width/height and relative children https://github.com/Textualize/textual/issues/1319
 
 ## [0.5.0] - 2022-11-20
 

src/textual/_layout.py

@@ -46,7 +46,7 @@ def arrange(
         """
 
     def get_content_width(self, widget: Widget, container: Size, viewport: Size) -> int:
-        """Get the width of the content.
+        """Get the optimal content width by arranging children.
 
         Args:
             widget (Widget): The container widget.
@@ -56,19 +56,18 @@ def get_content_width(self, widget: Widget, container: Size, viewport: Size) ->
         Returns:
             int: Width of the content.
         """
-        width: int | None = None
-        gutter_width = widget.gutter.width
-        for child in widget.displayed_children:
-            if not child.is_container:
-                child_width = (
-                    child.get_content_width(container, viewport)
-                    + gutter_width
-                    + child.gutter.width
-                )
-                width = child_width if width is None else max(width, child_width)
-        if width is None:
+        if not widget.children:
             width = 0
-
+        else:
+            # Use a size of 0, 0 to ignore relative sizes, since those are flexible anyway
+            placements, _, _ = widget._arrange(Size(0, 0))
+            width = max(
+                [
+                    placement.region.right + placement.margin.right
+                    for placement in placements
+                ],
+                default=0,
+            )
         return width
 
     def get_content_height(
@@ -85,12 +84,17 @@ def get_content_height(
         Returns:
             int: Content height (in lines).
         """
-        if not widget.displayed_children:
+        if not widget.children:
             height = 0
         else:
-            placements, *_ = widget._arrange(Size(width, container.height))
+            # Use a height of zero to ignore relative heights
+            placements, _, _ = widget._arrange(Size(width, 0))
             height = max(
-                placement.region.bottom + placement.margin.bottom
-                for placement in placements
+                [
+                    placement.region.bottom + placement.margin.bottom
+                    for placement in placements
+                ],
+                default=0,
             )
+
         return height

src/textual/cli/previews/colors.css

@@ -1,3 +1,6 @@
+Label {
+    width: 100%;
+}
 
 ColorButtons {
     dock: left;

src/textual/cli/previews/easing.css

@@ -1,3 +1,7 @@
+Label {
+    width: 100%;
+}
+
 EasingButtons > Button {
     width: 100%;
 }

src/textual/demo.css

@@ -190,7 +190,7 @@ LocationLink {
     padding: 1 2;
     background: $boost;
     color: $text;  
-
+    box-sizing: content-box;
     content-align: center middle;
 }
 

src/textual/demo.py

@@ -322,7 +322,7 @@ def compose(self) -> ComposeResult:
         example_css = "\n".join(Path(self.css_path[0]).read_text().splitlines()[:50])
         yield Container(
             Sidebar(classes="-hidden"),
-            Header(show_clock=True),
+            Header(show_clock=False),
             TextLog(classes="-hidden", wrap=False, highlight=True, markup=True),
             Body(
                 QuickAccess(

src/textual/layouts/horizontal.py

@@ -59,25 +59,3 @@ def arrange(
             x = next_x + margin
 
         return placements, set(displayed_children)
-
-    def get_content_width(self, widget: Widget, container: Size, viewport: Size) -> int:
-        """Get the width of the content. In Horizontal layout, the content width of
-        a widget is the sum of the widths of its children.
-
-        Args:
-            widget (Widget): The container widget.
-            container (Size): The container size.
-            viewport (Size): The viewport size.
-
-        Returns:
-            int: Width of the content.
-        """
-        if not widget.displayed_children:
-            width = 0
-        else:
-            placements, *_ = widget._arrange(container)
-            width = max(
-                placement.region.right + placement.margin.right
-                for placement in placements
-            )
-        return width

src/textual/widget.py

@@ -37,6 +37,7 @@
 from . import errors, events, messages
 from ._animator import DEFAULT_EASING, Animatable, BoundAnimator, EasingFunction
 from ._arrange import DockArrangeResult, arrange
+from ._cache import LRUCache
 from ._context import active_app
 from ._easing import DEFAULT_SCROLL_EASING
 from ._layout import Layout
@@ -246,8 +247,8 @@ def __init__(
         self._content_width_cache: tuple[object, int] = (None, 0)
         self._content_height_cache: tuple[object, int] = (None, 0)
 
-        self._arrangement: DockArrangeResult | None = None
-        self._arrangement_cache_key: tuple[int, Size] = (-1, Size())
+        self._arrangement_cache_updates: int = -1
+        self._arrangement_cache: LRUCache[Size, DockArrangeResult] = LRUCache(4)
 
         self._styles_cache = StylesCache()
         self._rich_style_cache: dict[str, tuple[Style, Style]] = {}
@@ -457,21 +458,24 @@ def _arrange(self, size: Size) -> DockArrangeResult:
         Returns:
             ArrangeResult: Widget locations.
         """
+        assert self.is_container
 
-        arrange_cache_key = (self.children._updates, size)
-        if (
-            self._arrangement is not None
-            and arrange_cache_key == self._arrangement_cache_key
-        ):
-            return self._arrangement
+        if self._arrangement_cache_updates != self.children._updates:
+            self._arrangement_cache_updates = self.children._updates
+            self._arrangement_cache.clear()
 
-        self._arrangement_cache_key = arrange_cache_key
-        self._arrangement = arrange(self, self.children, size, self.screen.size)
-        return self._arrangement
+        cached_arrangement = self._arrangement_cache.get(size, None)
+        if cached_arrangement is not None:
+            return cached_arrangement
+
+        arrangement = self._arrangement_cache[size] = arrange(
+            self, self.children, size, self.screen.size
+        )
+        return arrangement
 
     def _clear_arrangement_cache(self) -> None:
         """Clear arrangement cache, forcing a new arrange operation."""
-        self._arrangement = None
+        self._arrangement_cache.clear()
 
     def _get_virtual_dom(self) -> Iterable[Widget]:
         """Get widgets not part of the DOM.

tests/snapshot_tests/__snapshots__/test_snapshots.ambr

@@ -0,0 +1,37 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Static
+
+
+class HeightApp(App[None]):
+
+    CSS = """
+    Horizontal {
+        border: solid red;
+        height: auto;
+    }
+
+    Static {
+        border: solid green;
+        width: auto;
+    }
+
+    #fill_parent {
+        height: 100%;
+    }
+
+    #static {
+        height: 16;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Horizontal(
+            Static("As tall as container", id="fill_parent"),
+            Static("This has default\nheight\nbut a\nfew lines"),
+            Static("I have a static height", id="static"),
+        )
+
+
+if __name__ == "__main__":
+    HeightApp().run()