maxWidth with YGPercentValue doesn't work properly in YGFlexDirectionRow container #611

New Issue

2017-07-28T12:12:02-07:00

kostiadombrovsky commented

2017-07-28 12:12:02 -07:00

(Migrated from github.com)

Issues and Steps to Reproduce

maxWidth constraint is applied twice when measuring a view YGNodeBoundAxisWithinMinAndMax resolves max value with axisSize but axisSize was already constrained to the specified maxWidth value. So it basically does it twice.

Set maxWidth toYGPercentValue on the second view in a YGFlexDirectionRow container
Observe incorrect layout

Expected Behavior

Expected for the second subview in the example to be at most half its superview size.

Actual Behavior

The second subview in the example is 1/4 of the size.

Link to Code

                UIView *line1 = [[UIView alloc] init];
                [line1 configureLayoutWithBlock:^(YGLayout *layout) {
                    layout.enabled = YES;
                    layout.flexDirection = YGFlexDirectionRow;
                    layout.justifyContent = YGJustifySpaceBetween;
                    layout.alignItems = YGAlignCenter;
                    layout.paddingTop = YGPointValue(UBECardInfoViewTitleLabelMargins.top);
                }];
                line1.backgroundColor = [UBColor whiteColor];

                [self.titleLabel configureLayoutWithBlock:^(YGLayout *layout) {
                    layout.enabled = YES;
                }];
                [line1 addSubview:self.titleLabel];

                [self.subtitleLabel configureLayoutWithBlock:^(YGLayout *layout) {
                    layout.enabled = YES;
                    layout.marginTop = YGPointValue(2.0f);
                    layout.marginLeft = YGPointValue(UBEFeedItemCardCellDefaultMargin);
                    layout.maxWidth = YGPercentValue(50.0f);
                }];
                [line1 addSubview:self.subtitleLabel];
                [self insertSubview:line1 atIndex:0];

# Issues and Steps to Reproduce maxWidth constraint is applied twice when measuring a view `YGNodeBoundAxisWithinMinAndMax` resolves max value with `axisSize` but `axisSize` was already constrained to the specified maxWidth value. So it basically does it twice. 1. Set maxWidth to`YGPercentValue` on the second view in a `YGFlexDirectionRow` container 2. Observe incorrect layout # Expected Behavior Expected for the second subview in the example to be at most half its superview size. # Actual Behavior The second subview in the example is 1/4 of the size. # Link to Code ``` UIView *line1 = [[UIView alloc] init]; [line1 configureLayoutWithBlock:^(YGLayout *layout) { layout.enabled = YES; layout.flexDirection = YGFlexDirectionRow; layout.justifyContent = YGJustifySpaceBetween; layout.alignItems = YGAlignCenter; layout.paddingTop = YGPointValue(UBECardInfoViewTitleLabelMargins.top); }]; line1.backgroundColor = [UBColor whiteColor]; [self.titleLabel configureLayoutWithBlock:^(YGLayout *layout) { layout.enabled = YES; }]; [line1 addSubview:self.titleLabel]; [self.subtitleLabel configureLayoutWithBlock:^(YGLayout *layout) { layout.enabled = YES; layout.marginTop = YGPointValue(2.0f); layout.marginLeft = YGPointValue(UBEFeedItemCardCellDefaultMargin); layout.maxWidth = YGPercentValue(50.0f); }]; [line1 addSubview:self.subtitleLabel]; [self insertSubview:line1 atIndex:0]; ```

woehrl01 commented

2017-10-09 10:01:52 -07:00

(Migrated from github.com)

Hi @kostiadombrovsky .

I tried to reproduce, but this works for me, the size is correctly 60px wide:

<div id="percent_sub_child" style="width: 120px; height: 20px; flex-direction: row; justify-content: space-between; align-items: center;">
  <div></div>
  <div style="margin-top: 2px; margin-left: 5px; max-width: 50%">
    <div style="width: 80px"></div>
  </div>
</div>

could you please provide a more complete repro?

Hi @kostiadombrovsky . I tried to reproduce, but this works for me, the size is correctly 60px wide: ```html <div id="percent_sub_child" style="width: 120px; height: 20px; flex-direction: row; justify-content: space-between; align-items: center;"> <div></div> <div style="margin-top: 2px; margin-left: 5px; max-width: 50%"> <div style="width: 80px"></div> </div> </div> ``` could you please provide a more complete repro?

woehrl01 commented

2017-10-09 11:11:51 -07:00

(Migrated from github.com)

Sorry @kostiadombrovsky , found the problem! I pushed a PR at #649 . Thank you for the report.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#611