Skip to content

Commit 0599af2

Browse files
using width for calculating margin top percent
Summary: In Yoga, margin is not calculated correctly when defined in terms of percentage at one place. According to CSS docs , margin percentage should be calculated according to width of container's block in case of horizontal writing mode. (https://fburl.com/5imus0it) We were using height of container causing some issues in both android and iOS. ## Changelog: [Yoga] [Fixed] - margin if defined in percentage should use container's width in horizontal writing mode Reviewed By: alickbass Differential Revision: D18395285 fbshipit-source-id: 87ebd013e3cba36da45f6548e4dff1bce69cce9b
1 parent 39704b8 commit 0599af2

File tree

1 file changed

+7
-5
lines changed

1 file changed

+7
-5
lines changed

ReactCommon/yoga/yoga/Yoga.cpp

+7-5
Original file line numberDiff line numberDiff line change
@@ -1868,15 +1868,17 @@ static float YGNodeCalculateAvailableInnerDim(
18681868
const YGNodeConstRef node,
18691869
YGFlexDirection axis,
18701870
float availableDim,
1871-
float ownerDim) {
1871+
float ownerDim,
1872+
float ownerDimForMarginPadding) {
18721873
YGFlexDirection direction =
18731874
YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn;
18741875
YGDimension dimension =
18751876
YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight;
18761877

1877-
const float margin = node->getMarginForAxis(direction, ownerDim).unwrap();
1878+
const float margin =
1879+
node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap();
18781880
const float paddingAndBorder =
1879-
YGNodePaddingAndBorderForAxis(node, direction, ownerDim);
1881+
YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding);
18801882

18811883
float availableInnerDim = availableDim - margin - paddingAndBorder;
18821884
// Max dimension overrides predefined dimension value; Min dimension in turn
@@ -2894,9 +2896,9 @@ static void YGNodelayoutImpl(
28942896
// STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS
28952897

28962898
float availableInnerWidth = YGNodeCalculateAvailableInnerDim(
2897-
node, YGFlexDirectionRow, availableWidth, ownerWidth);
2899+
node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth);
28982900
float availableInnerHeight = YGNodeCalculateAvailableInnerDim(
2899-
node, YGFlexDirectionColumn, availableHeight, ownerHeight);
2901+
node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth);
29002902

29012903
float availableInnerMainDim =
29022904
isMainAxisRow ? availableInnerWidth : availableInnerHeight;

0 commit comments

Comments
 (0)