diff --git a/modules/Element.lua b/modules/Element.lua index c323b9d..0e3577e 100644 --- a/modules/Element.lua +++ b/modules/Element.lua @@ -731,7 +731,6 @@ function Element.new(props) -- Check if we should use 9-patch content padding for auto-sizing local use9PatchPadding = false local ninePatchContentPadding = nil - local tempPadding = nil if self._themeManager:hasThemeComponent() then local component = self._themeManager:getComponent() if component and component._ninePatchData and component._ninePatchData.contentPadding then @@ -749,22 +748,31 @@ function Element.new(props) then use9PatchPadding = true ninePatchContentPadding = component._ninePatchData.contentPadding - local scaledPadding = self._themeManager:getScaledContentPadding(tempWidth, tempHeight) - if scaledPadding then - tempPadding = scaledPadding - else - tempPadding = { - left = ninePatchContentPadding.left, - top = ninePatchContentPadding.top, - right = ninePatchContentPadding.right, - bottom = ninePatchContentPadding.bottom, - } - end end - tempPadding = Units.resolveSpacing(props.padding, self.width, self.height) end end + -- First, resolve padding using temporary dimensions + -- For auto-sized elements, this is content width; for explicit sizing, this is border-box width + local tempPadding + if use9PatchPadding then + -- Get scaled 9-patch content padding from ThemeManager + local scaledPadding = self._themeManager:getScaledContentPadding(tempWidth, tempHeight) + if scaledPadding then + tempPadding = scaledPadding + else + -- Fallback if scaling fails + tempPadding = { + left = ninePatchContentPadding.left, + top = ninePatchContentPadding.top, + right = ninePatchContentPadding.right, + bottom = ninePatchContentPadding.bottom, + } + end + else + tempPadding = Units.resolveSpacing(props.padding, self.width, self.height) + end + -- Margin percentages are relative to parent's dimensions (CSS spec) local parentWidth = self.parent and self.parent.width or viewportWidth local parentHeight = self.parent and self.parent.height or viewportHeight diff --git a/modules/LayoutEngine.lua b/modules/LayoutEngine.lua index b98f234..f40a91d 100644 --- a/modules/LayoutEngine.lua +++ b/modules/LayoutEngine.lua @@ -485,7 +485,7 @@ function LayoutEngine:layoutChildren() -- Vertical layout: main axis is Y, cross axis is X -- Position child at border box (x, y represents top-left including padding) -- Add reservedMainStart and top margin to account for absolutely positioned siblings and margins - child.y = element.y + element.padding.top + reservedMainStart + currentMainPos + child.margin.top + child.y = self.element.y + self.element.padding.top + reservedMainStart + currentMainPos + child.margin.top -- BORDER-BOX MODEL: Use border-box dimensions for alignment calculations local childBorderBoxWidth = child:getBorderBoxWidth()