Skip to content

Commit

Permalink
using width for calculating margin top percent
Browse files Browse the repository at this point in the history
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
  • Loading branch information
SidharthGuglani-zz authored and facebook-github-bot committed Nov 13, 2019
1 parent 39704b8 commit 0599af2
Showing 1 changed file with 7 additions and 5 deletions.
12 changes: 7 additions & 5 deletions ReactCommon/yoga/yoga/Yoga.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -1868,15 +1868,17 @@ static float YGNodeCalculateAvailableInnerDim(
const YGNodeConstRef node,
YGFlexDirection axis,
float availableDim,
float ownerDim) {
float ownerDim,
float ownerDimForMarginPadding) {
YGFlexDirection direction =
YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn;
YGDimension dimension =
YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight;

const float margin = node->getMarginForAxis(direction, ownerDim).unwrap();
const float margin =
node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap();
const float paddingAndBorder =
YGNodePaddingAndBorderForAxis(node, direction, ownerDim);
YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding);

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

float availableInnerWidth = YGNodeCalculateAvailableInnerDim(
node, YGFlexDirectionRow, availableWidth, ownerWidth);
node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth);
float availableInnerHeight = YGNodeCalculateAvailableInnerDim(
node, YGFlexDirectionColumn, availableHeight, ownerHeight);
node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth);

float availableInnerMainDim =
isMainAxisRow ? availableInnerWidth : availableInnerHeight;
Expand Down

0 comments on commit 0599af2

Please sign in to comment.