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.

Sign up for GitHub

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

Jump to bottom

Call to this._getFlowDirection(this.parentElement, true); overwrites flex-direction set in stylesheet #364

Closed
ppham27 opened this issue Aug 6, 2017 · 3 comments
Closed

Call to this._getFlowDirection(this.parentElement, true); overwrites flex-direction set in stylesheet #364

ppham27 opened this issue Aug 6, 2017 · 3 comments
Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Milestone
v2.0.0-beta.9

Comments

@ppham27
Copy link

ppham27 commented Aug 6, 2017 •
edited by ThomasBurleson
Loading

Commit #353 will set the flex-direction of the parent container to row when using fxFlex on a child element in this line. In our app, we set the flex-direction to column in a stylesheet, but the method only reads from the style attribute. Thus, the column flex-direction is overwritten.

This is where the child element sets the flex-direction of the parent element.

https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/flex.ts#L162

My workaround has been to do

@Component({                                                                                       
  moduleId: module.id,                                                                             
  selector: 'my-app',                                                                       
  host: {                                                                                          
    style: 'flex-direction: column',                                                               
  },                                                                                               
  styleUrls: ['./my_app.css'],                                                              
  templateUrl: './my_app.ng.html',                                                          
})
@rosslavery
Copy link

I believe this is a duplicate of #272.

ThomasBurleson added a commit that referenced this issue Aug 6, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
dde889d 
When scanning parent DOM element for flexbox flow direction,
first scan the in element's inline style and then scan the computed
stylesheet for the `flex-direction` value.

Fixes #272, #364.
@ThomasBurleson ThomasBurleson mentioned this issue Aug 6, 2017
Merged
@ThomasBurleson ThomasBurleson added this to the v2.0.0-beta.9 milestone Aug 6, 2017
@ThomasBurleson ThomasBurleson added the has pr A PR has been created to address this issue label Aug 6, 2017
ThomasBurleson added a commit that referenced this issue Aug 6, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
07f9a63 
When scanning parent DOM element for flexbox flow direction,
first scan the in element's inline style and then scan the computed
stylesheet for the `flex-direction` value.

Fixes #272, #364.
ThomasBurleson added a commit that referenced this issue Aug 6, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
55a7636 
When scanning parent DOM element for flexbox flow direction,
first scan the in element's inline style and then scan the computed
stylesheet for the `flex-direction` value.

Fixes #272, #364.
ThomasBurleson added a commit that referenced this issue Aug 7, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
e8beef7 
When scanning parent DOM element for flexbox flow direction,
first scan the in element's inline style and then scan the computed
stylesheet for the `flex-direction` value.

Fixes #272, #364.
ThomasBurleson added a commit that referenced this issue Aug 7, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
90f4238 
fxFlex works best if the parent container has flexbox styles assigned
(display, flex-direction, etc.). If not assiged (inline or via stylesheet),
then these styles are auto-injected inline on the DOM parent element.

When scanning parent DOM element for flexbox flow direction,
first scan the in element's inline style and then scan the computed
stylesheet for the `flex-direction` value.

Fixes #272, #364.
ThomasBurleson added a commit that referenced this issue Aug 7, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
16f8656 
`fxFlex` works best if the parent container has flexbox styles assigned (display, flex-direction, etc.). If not assigned (inline or via stylesheet), then these styles are auto-injected inline on the DOM parent element.

When scanning parent DOM element for flexbox flow direction, first scan the in element's inline style and then scan the computed stylesheet for the `flex-direction` value.

Fixes #272, #364.
ThomasBurleson added a commit that referenced this issue Aug 7, 2017
@ThomasBurleson
fix(flexbox): scan flex-direction in css stylesheet
4d16c03 
`fxFlex` works best if the parent container has flexbox styles assigned (display, flex-direction, etc.). If not assigned (inline or via stylesheet), then these styles are auto-injected inline on the DOM parent element.

When scanning parent DOM element for flexbox flow direction, first scan the in element's inline style and then scan the computed stylesheet for the `flex-direction` value.

> It is assumed that if the parent element has a `flex-direction` style property set, then the other required properties (display, border-box, etc.)  have also been assigned.

Fixes #272, #364.
@ThomasBurleson ThomasBurleson added bug P2 Issue that is important to resolve as soon as possible labels Aug 7, 2017
mmalerba pushed a commit that referenced this issue Aug 7, 2017
@ThomasBurleson @mmalerba
fix(flexbox): scan flex-direction in css stylesheet (#365)
635c4f5 
`fxFlex` works best if the parent container has flexbox styles assigned (display, flex-direction, etc.). If not assigned (inline or via stylesheet), then these styles are auto-injected inline on the DOM parent element.

When scanning parent DOM element for flexbox flow direction, first scan the in element's inline style and then scan the computed stylesheet for the `flex-direction` value.

> It is assumed that if the parent element has a `flex-direction` style property set, then the other required properties (display, border-box, etc.)  have also been assigned.

Fixes #272, #364.
@ThomasBurleson
Copy link
Contributor

Fixed with SHA dde889d

@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.
Assignees
No one assigned
Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Projects
None yet
Milestone
v2.0.0-beta.9
Development

No branches or pull requests
3 participants
@ThomasBurleson @rosslavery @ppham27