fxShow/fxHide breaks alignment

[jt-helsinki]

Hi,

When adding fxShow/FxHide to my <div>, the fxLayoutAlign alignment is no longer recognised. This can be easily replicated in the plunkr demo for this project. Fiddling around with various combinations make this easy to replicate.

• "@angular/flex-layout": "^2.0.0-beta.5"

If this is not a bug, would it be possible to provide an example? My understanding of the documentation is that I should be using <fxFlexAlign> for aligning the contents however that makes no difference either way.

Many thanks

Works as intended:

     <div fxLayout="row" fxFlex="grow" fxLayoutAlign="start center">
            <div fxFlex="200px" fxLayoutAlign="start center">
                Start Alignment
            </div>
            <!-- responsive menu -->
            <div fxFlex="grow" fxLayoutAlign="end center">
                End Alignment
            </div>
    </div>

Does NOT work:

     <div fxLayout="row" fxFlex="grow" fxLayoutAlign="start center">
            <div fxFlex="200px" fxLayoutAlign="start center">
                Start Alignment
            </div>
            <!-- responsive menu -->
            <div fxFlex="grow" fxLayoutAlign="end center" fxShow fxHide.gt-sm>
                End Alignment
            </div>
    </div>

[i2egular]

In my case, i can fix by setting fxLayoutAlign outside and put another div inside then use fxShow or fxHide with it.

Another solution:

<div fxLayout="row" fxLayoutAlign="center center">
    <div fxHide="false" fxHide.xs>This is center.</div>
</div>

[jt-helsinki]

@i2egular thanks for that. Unfortunately, although this may work it creates a redundant div in the middle.

[ThomasBurleson]

@paistipoikka - Recently a community developer (thx to @ phil294) discovered that dual usages of fxShow + fxHide on the same element often do not working properly.

This has been fixed in PR #190.

Meanwhile, can you provide a Plunkr to validate that 190 fixes your issue ^?

[ThomasBurleson]

Fixed with SHA eee20b2

[angular-automatic-lock-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.}