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

fxLayoutGap doesnt work properly with fxFlexOrder #608

Closed
naveedahmed1 opened this issue Feb 10, 2018 · 4 comments · Fixed by #623
Closed

fxLayoutGap doesnt work properly with fxFlexOrder #608

naveedahmed1 opened this issue Feb 10, 2018 · 4 comments · Fixed by #623
Assignees
Labels
bug has pr A PR has been created to address this issue P1 Urgent issue that should be resolved before the next re-lease

Comments

@naveedahmed1
Copy link

Bug, feature request, or proposal:

fxLayoutGap doesn't seem to work properly with fxFlexOrder. Try the below code:

<div fxLayout="row wrap" fxLayoutGap="15px">
<div fxFlex="310px" fxFlex.xs="100" fxFlexOrder.gt-xs="2">
DIV A
</div>
<div fxFlex="calc(100%-325px)" fxFlex.xs="100" fxFlexOrder.gt-xs="1">
DIV B
</div>
</div>

In case of gt-xs DIV A is shown on right and has margin-right set to 15px, whereas DIV B is shown on left without margin right.

What is the expected behavior?

In case of gt-xs DIV A should be shown on right and should have margin-right set to 0px, whereas DIV B should be shown on left with margin right set to 15px.

@CaerusKaru
Copy link
Member

Please provide a StackBlitz demo so we can investigate.

@naveedahmed1
Copy link
Author

Here you go https://stackblitz.com/edit/angular-material-flex-layout-seed-j1npac
preview https://angular-material-flex-layout-seed-j1npac.stackblitz.io/

@CaerusKaru
Copy link
Member

This has a straightforward fix, and I can get this in on Tuesday after the release (or rather, after #567 has been merged). Thanks for finding this!

@CaerusKaru CaerusKaru self-assigned this Feb 10, 2018
@CaerusKaru CaerusKaru added this to the v5.0.0-beta.14 milestone Feb 10, 2018
@CaerusKaru CaerusKaru added in-progress P1 Urgent issue that should be resolved before the next re-lease labels Feb 10, 2018
CaerusKaru added a commit that referenced this issue Feb 18, 2018
* Sort the elements by flex order before applying gap stylings

Fixes #608
CaerusKaru added a commit that referenced this issue Feb 18, 2018
* Sort the elements by flex order before applying gap stylings

Fixes #608
@CaerusKaru CaerusKaru added has pr A PR has been created to address this issue and removed in-progress labels Feb 18, 2018
ThomasBurleson pushed a commit that referenced this issue Feb 20, 2018
* Sort the elements by flex order before applying gap stylings

Fixes #608
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug has pr A PR has been created to address this issue P1 Urgent issue that should be resolved before the next re-lease
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants