Flex-layout: fxLayout="row-reverse" not rendering correctly when nested inside a fxLayout="row"

[adrian-heath]

The use of row-reverse is not being rendered correctly as shown in the below HTML for the nested flex container which shows flex-direction:row.

• Browser is Chrome,
• flex-layout v2.0.0-beta.1.

Changing the outer container to also be row-reverse still doesn't correct the inner containers direction.

<div _ngcontent-gew-112="" 
        class="flex-container bottom-margin" 
        fxlayout="row-reverse" 
        fxlayoutalign="center center" 
        ng-reflect-layout="row-reverse" 
        ng-reflect-align="center center" 
        style="box-sizing: border-box; 
                    max-height: 100%; 
                    display: flex; 
                    flex-direction: row; 
                    justify-content: center; 
                    align-items: center; 
                    align-content: center;">

[ThomasBurleson]

Issues are considered invalid without a working Plunkr or CodePen demo.

---

Also here are some important guidelines for investigating a Layout issue:

• The Layout API is case-sensitive
  
  
  
  • fxlayout is not valid
  
  
  • fxLayout is valid
  
  
• If you cannot get Flex-Layout to work with an example, try to manually use CSS flexbox stylings. If that still does not work to achieve your goals, then Flex-Layout is not the issue.
• If hand-crafted CSS resolves the issue, but Flex-Layout does not then we definitely have a bug in this repository.

Templates

• Plunkr Template
• Plunkr Template with Material2

[adrian-heath]

Here is a Plunkr

https://plnkr.co/edit/JcQRiKbeU0uB3m91RMHo?p=preview

The inner layout is set to row-reverse but always shows as row irrespecitive of the outer containers layout

[ThomasBurleson]

@adrian-heath - This is a great Plnkr. Thank you very much!

---

You will laugh > the issue is simple and easy to stumble into. Your version is using binding to expression that is actually a static text value:

Yours:

<div [fxLayout]="row-reverse" class="colored box" >

Corrected

<div fxLayout="row-reverse" class="colored box" >

[ThomasBurleson]

Closing as not-an-issue.

[d3viant0ne]

I've done that more than once myself.

[ThomasBurleson]

Me too!

[adrian-heath]

Turns out whilst I thought I had recreated as it was in my code, I'd missed something which does break row-reverse. I added fxLayoutAlign="center center" to the inner container and row-reverse was broken again. I'll create a separate issue since this one is now closed

[angular-automatic-lock-bot[bot]]

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._}