Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ContentAlign and AlignItems combination cause wrong behaviour #1008

Closed
jalopez1986 opened this issue Jun 2, 2020 · 3 comments
Closed

ContentAlign and AlignItems combination cause wrong behaviour #1008

jalopez1986 opened this issue Jun 2, 2020 · 3 comments

Comments

@jalopez1986
Copy link

jalopez1986 commented Jun 2, 2020

Report

Issues and Steps to Reproduce

Configure a Flexbox in this way

     <View style={{width: 300, height: 300, backgroundColor: 'red', flexDirection: 'row',flexWrap:'wrap', alignContent:'space-around',alignItems:'flex-end' }}>
        <View style={{width: 150, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 120, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 120, height: 50, backgroundColor: 'steelblue'}} />
      </View>
  

Expected Behavior

The elements must be show like this: (This is the web representation)
image

Actual Behavior

image
the elements are wrong located, the combination of contentAlign and AlignItem causes strange behaviours.
Whit combination like
ContentAlign: space-around or space-between with
AlignItems: center or flex-end
The algorithm locate the elements in awrong way.

Link to Code

https://stackblitz.com/edit/typescript-yoga-rg4mcr?file=index.ts

@woehrl01
Copy link
Contributor

woehrl01 commented Jun 9, 2020

Hi @jalopez1986

Thanks for reporting this. I just pushed a PR for the fix.

@jalopez1986
Copy link
Author

You're Welcome, this is an excellent library.
Thanks to you for solve it
@woehrl01 Do you know approximately how often a new version is released with bug fixes?

@woehrl01
Copy link
Contributor

Unfortunately I can't give you an ETA for a new published version, as I haven't been involved in that project for a long time. The maintainer of Facebook has changed since the last time.

The last fixes involved the following steps: it need to undergo an external review (on github), then it gets imported to the internal repository, then an internal review (facebook) takes place. After that at best, no internal tests are failing (which rely on the previous behavior). If nothing fails there should be no real blocker in creating a new release to my knowledge.

Maybe @SidharthGuglani, you can give more insight into the current process?

NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 12, 2023
Summary:
Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/yoga that referenced this issue Dec 12, 2023
Summary:
Fixes facebook#1300
Fixes facebook#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook#1491
2. facebook#1493
3. facebook#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 12, 2023
Summary:
Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 12, 2023
…41916)

Summary:
X-link: facebook/yoga#1513


Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/yoga that referenced this issue Dec 12, 2023
…1513)

Summary:

X-link: facebook/react-native#41916

Fixes facebook#1300
Fixes facebook#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook#1491
2. facebook#1493
3. facebook#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 12, 2023
…41916)

Summary:
X-link: facebook/yoga#1513


Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/yoga that referenced this issue Dec 12, 2023
…1513)

Summary:

X-link: facebook/react-native#41916

Fixes facebook#1300
Fixes facebook#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook#1491
2. facebook#1493
3. facebook#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 16, 2023
…41916)

Summary:
X-link: facebook/yoga#1513


Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/yoga that referenced this issue Dec 16, 2023
…1513)

Summary:

X-link: facebook/react-native#41916

Fixes facebook#1300
Fixes facebook#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook#1491
2. facebook#1493
3. facebook#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/yoga that referenced this issue Dec 16, 2023
…1513)

Summary:

X-link: facebook/react-native#41916

Fixes facebook#1300
Fixes facebook#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook#1491
2. facebook#1493
3. facebook#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013
NickGerleman added a commit to NickGerleman/react-native that referenced this issue Dec 16, 2023
…41916)

Summary:
X-link: facebook/yoga#1513


Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013
facebook-github-bot pushed a commit that referenced this issue Dec 16, 2023
Summary:
Pull Request resolved: #1513

X-link: facebook/react-native#41916

Fixes #1300
Fixes #1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. #1491
2. #1493
3. #1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013

fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Dec 16, 2023
Summary:
X-link: facebook/yoga#1513

Pull Request resolved: #41916

Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013

fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
Othinn pushed a commit to Othinn/react-native that referenced this issue Jan 9, 2024
…41916)

Summary:
X-link: facebook/yoga#1513

Pull Request resolved: facebook#41916

Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013

fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment