Expanding fr (#2221)

* forced fr to expand

* margin size

* remove comment

* missing snapshot

* snapshot tests

* changelog

* optimize

* snapshot fix

* snapshot update

* snapshot and fixes

* docstrings [skip ci]

Author: willmcgugan

CHANGELOG.md

@@ -15,9 +15,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Allowed border_title and border_subtitle to accept Text objects
 - Added additional line around titles
+- When a container is auto, relative dimensions in children stretch the container. https://github.com/Textualize/textual/pull/2221
 
 ### Fixed
 
+- Fixed margin not being respected when width or height is "auto" https://github.com/Textualize/textual/issues/2220
 - Fixed issue which prevent scroll_visible from working https://github.com/Textualize/textual/issues/2181
 
 ## [0.18.0] - 2023-04-04

docs/examples/widgets/content_switcher.css

@@ -1,9 +1,9 @@
 Screen {
     align: center middle;
+    padding: 1;
 }
 
 #buttons {
-    margin-top: 1;
     height: 3;
     width: auto;
 }
@@ -12,7 +12,7 @@ ContentSwitcher {
     background: $panel;
     border: round $primary;
     width: 90%;
-    height: 80%;
+    height: 1fr;
 }
 
 DataTable {

src/textual/_layout.py

@@ -136,4 +136,5 @@ def get_content_height(
             # Use a height of zero to ignore relative heights
             arrangement = widget._arrange(Size(width, 0))
             height = arrangement.total_region.bottom
+
         return height

src/textual/_resolve.py

@@ -33,7 +33,6 @@ def resolve(
     Returns:
         List of (<OFFSET>, <LENGTH>)
     """
-
     resolved: list[tuple[Scalar, Fraction | None]] = [
         (
             (scalar, None)
@@ -84,6 +83,7 @@ def resolve_box_models(
     widgets: list[Widget],
     size: Size,
     parent_size: Size,
+    margin: Size,
     dimension: Literal["width", "height"] = "width",
 ) -> list[BoxModel]:
     """Resolve box models for a list of dimensions
@@ -93,14 +93,19 @@ def resolve_box_models(
         widgets: Widgets in resolve.
         size: Size of container.
         parent_size: Size of parent.
+        margin: Total space occupied by margin
         dimensions: Which dimension to resolve.
 
     Returns:
         List of resolved box models.
     """
+    margin_width, margin_height = margin
+
+    fraction_width = Fraction(max(0, size.width - margin_width))
+    fraction_height = Fraction(max(0, size.height - margin_height))
+
+    margin_size = size - margin
 
-    fraction_width = Fraction(size.width)
-    fraction_height = Fraction(size.height)
     box_models: list[BoxModel | None] = [
         (
             None
@@ -116,12 +121,12 @@ def resolve_box_models(
         total_remaining = sum(
             box_model.width for box_model in box_models if box_model is not None
         )
-        remaining_space = max(0, size.width - total_remaining)
+        remaining_space = max(0, size.width - total_remaining - margin_width)
     else:
         total_remaining = sum(
             box_model.height for box_model in box_models if box_model is not None
         )
-        remaining_space = max(0, size.height - total_remaining)
+        remaining_space = max(0, size.height - total_remaining - margin_height)
 
     fraction_unit = Fraction(
         remaining_space,
@@ -136,9 +141,9 @@ def resolve_box_models(
     )
     if dimension == "width":
         width_fraction = fraction_unit
-        height_fraction = Fraction(size.height)
+        height_fraction = Fraction(margin_size.height)
     else:
-        width_fraction = Fraction(size.width)
+        width_fraction = Fraction(margin_size.width)
         height_fraction = fraction_unit
 
     box_models = [

src/textual/box_model.py

@@ -1,10 +1,9 @@
 from __future__ import annotations
 
 from fractions import Fraction
-from typing import Callable, NamedTuple
+from typing import NamedTuple
 
-from .css.styles import StylesBase
-from .geometry import Size, Spacing
+from .geometry import Spacing
 
 
 class BoxModel(NamedTuple):
@@ -14,119 +13,3 @@ class BoxModel(NamedTuple):
     width: Fraction
     height: Fraction
     margin: Spacing  # Additional margin
-
-
-def get_box_model(
-    styles: StylesBase,
-    container: Size,
-    viewport: Size,
-    width_fraction: Fraction,
-    height_fraction: Fraction,
-    get_content_width: Callable[[Size, Size], int],
-    get_content_height: Callable[[Size, Size, int], int],
-) -> BoxModel:
-    """Resolve the box model for this Styles.
-
-    Args:
-        styles: Styles object.
-        container: The size of the widget container.
-        viewport: The viewport size.
-        width_fraction: A fraction used for 1 `fr` unit on the width dimension.
-        height_fraction: A fraction used for 1 `fr` unit on the height dimension.
-        get_content_width: A callable which accepts container size and parent size and returns a width.
-        get_content_height: A callable which accepts container size and parent size and returns a height.
-
-    Returns:
-        A tuple with the size of the content area and margin.
-    """
-    _content_width, _content_height = container
-    content_width = Fraction(_content_width)
-    content_height = Fraction(_content_height)
-    is_border_box = styles.box_sizing == "border-box"
-    gutter = styles.gutter
-    margin = styles.margin
-
-    is_auto_width = styles.width and styles.width.is_auto
-    is_auto_height = styles.height and styles.height.is_auto
-
-    # Container minus padding and border
-    content_container = container - gutter.totals
-    # The container including the content
-    sizing_container = content_container if is_border_box else container
-
-    if styles.width is None:
-        # No width specified, fill available space
-        content_width = Fraction(content_container.width - margin.width)
-    elif is_auto_width:
-        # When width is auto, we want enough space to always fit the content
-        content_width = Fraction(
-            get_content_width(content_container - styles.margin.totals, viewport)
-        )
-        if styles.scrollbar_gutter == "stable" and styles.overflow_x == "auto":
-            content_width += styles.scrollbar_size_vertical
-    else:
-        # An explicit width
-        styles_width = styles.width
-        content_width = styles_width.resolve(
-            sizing_container - styles.margin.totals, viewport, width_fraction
-        )
-        if is_border_box and styles_width.excludes_border:
-            content_width -= gutter.width
-
-    if styles.min_width is not None:
-        # Restrict to minimum width, if set
-        min_width = styles.min_width.resolve(
-            content_container, viewport, width_fraction
-        )
-        content_width = max(content_width, min_width)
-
-    if styles.max_width is not None:
-        # Restrict to maximum width, if set
-        max_width = styles.max_width.resolve(
-            content_container, viewport, width_fraction
-        )
-        if is_border_box:
-            max_width -= gutter.width
-        content_width = min(content_width, max_width)
-
-    content_width = max(Fraction(0), content_width)
-
-    if styles.height is None:
-        # No height specified, fill the available space
-        content_height = Fraction(content_container.height - margin.height)
-    elif is_auto_height:
-        # Calculate dimensions based on content
-        content_height = Fraction(
-            get_content_height(content_container, viewport, int(content_width))
-        )
-        if styles.scrollbar_gutter == "stable" and styles.overflow_y == "auto":
-            content_height += styles.scrollbar_size_horizontal
-    else:
-        styles_height = styles.height
-        # Explicit height set
-        content_height = styles_height.resolve(
-            sizing_container - styles.margin.totals, viewport, height_fraction
-        )
-        if is_border_box and styles_height.excludes_border:
-            content_height -= gutter.height
-
-    if styles.min_height is not None:
-        # Restrict to minimum height, if set
-        min_height = styles.min_height.resolve(
-            content_container, viewport, height_fraction
-        )
-        content_height = max(content_height, min_height)
-
-    if styles.max_height is not None:
-        # Restrict maximum height, if set
-        max_height = styles.max_height.resolve(
-            content_container, viewport, height_fraction
-        )
-        content_height = min(content_height, max_height)
-
-    content_height = max(Fraction(0), content_height)
-
-    model = BoxModel(
-        content_width + gutter.width, content_height + gutter.height, margin
-    )
-    return model

src/textual/css/styles.py

@@ -384,6 +384,21 @@ def auto_dimensions(self) -> bool:
             has_rule("height") and self.height.is_auto  # type: ignore
         )
 
+    @property
+    def is_relative_width(self) -> bool:
+        """Does the node have a relative width?"""
+        width = self.width
+        return width is not None and width.unit in (
+            Unit.FRACTION,
+            Unit.PERCENT,
+        )
+
+    @property
+    def is_relative_height(self) -> bool:
+        """Does the node have a relative width?"""
+        height = self.height
+        return height is not None and height.unit in (Unit.FRACTION, Unit.PERCENT)
+
     @abstractmethod
     def has_rule(self, rule: str) -> bool:
         """Check if a rule is set on this Styles object.

src/textual/layouts/horizontal.py

@@ -23,11 +23,28 @@ def arrange(
         x = max_height = Fraction(0)
         parent_size = parent.outer_size
 
+        child_styles = [child.styles for child in children]
+        box_margins = [styles.margin for styles in child_styles]
+        if box_margins:
+            resolve_margin = Size(
+                (
+                    sum(
+                        max(margin1.right, margin2.left)
+                        for margin1, margin2 in zip(box_margins, box_margins[1:])
+                    )
+                    + (box_margins[0].left + box_margins[-1].right)
+                ),
+                max(margin.height for margin in box_margins),
+            )
+        else:
+            resolve_margin = Size(0, 0)
+
         box_models = resolve_box_models(
-            [child.styles.width for child in children],
+            [styles.width for styles in child_styles],
             children,
             size,
             parent_size,
+            resolve_margin,
             dimension="width",
         )
 

src/textual/layouts/vertical.py

@@ -23,11 +23,28 @@ def arrange(
         add_placement = placements.append
         parent_size = parent.outer_size
 
+        child_styles = [child.styles for child in children]
+        box_margins = [styles.margin for styles in child_styles]
+        if box_margins:
+            resolve_margin = Size(
+                max([margin.width for margin in box_margins]),
+                (
+                    sum(
+                        max(margin1.bottom, margin2.top)
+                        for margin1, margin2 in zip(box_margins, box_margins[1:])
+                    )
+                    + (box_margins[0].top + box_margins[-1].bottom)
+                ),
+            )
+        else:
+            resolve_margin = Size(0, 0)
+
         box_models = resolve_box_models(
-            [child.styles.height for child in children],
+            [styles.height for styles in child_styles],
             children,
             size,
             parent_size,
+            resolve_margin,
             dimension="height",
         )