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

fxFlex translates to "flex: 1 1 0%" when component is recreated #1293

Open
mereshow opened this issue Sep 10, 2020 · 1 comment
Open

fxFlex translates to "flex: 1 1 0%" when component is recreated #1293

mereshow opened this issue Sep 10, 2020 · 1 comment

Comments

@mereshow
Copy link

Bug Report

I use mat-sidenav (Angular material) to display a component (<app-dashboard-home>).

The component occupies the whole sidenav-content. The template of this component has div (row container) that uses the fxFlex directive, and 2 inner divs 50% width each (inner divs).

The first time the component is loaded the inner divs are resized properly when the sidenav drawer is opened/closed.
If I navigate to another component and come back, inner divs are not resized properly and expand beyond the row container.

After a lot of testing I traced it to the fxFlex directive in the row container as being translated to flex: "1 1 1e-09px" the first time the component is created and to `flex: "1 1 0%" when it is recreated after navigating away and back.

What is the expected behavior?

When a component that uses fxFlex in its template is recreated, fxFlex should be translate to flex: "1 1 1e-09px".

What is the current behavior?

When the component is destroyed (load another route) and recreated, fxFlex is translated to flex: "1 1 0%".

What are the steps to reproduce?

This only happens in local development, in stackblitz it behaves normally (in stackblitz fxFlex translates to flex: "1 1 1e-09px" in component creation and recreation). I could not figure out why.

I created a demo in stackblitz, it behaves as expected: demo
If this repo is cloned and run locally it behaves abnormally: Github repo
I tried to clone the repo several times from zero (to reproduce it as you would) but got an error when doing npm install. It works correctly if run as sudo (or npm clean-install).

To reproduce:

  1. Run ng s -o. The page loads. Open and close the drawer: the content is resized.
  2. Navigate to another page ("historical" in the navigation menu), and navigate back to "dashboard".
  3. Open and close the drawer: the content is not resized.

I colored the containers so it is more obvious which elements are not resizing.

Is there anything else we should know?

If I remove the fxLayoutGap in the row container, it behaves as expected, although fxFlex is also recreated as flex: "1 1 0%" (I don't understand why).
If I use fxFlex="1 1 100%" in the row container it behaves correctly all the time.
I am a rookie in frontend development and Angular, I could be making an obvious mistake.

@mereshow mereshow changed the title fxFlex defaults to "1 1 0%" when component is recreated fxFlex translates to "flex: 1 1 0%" when component is recreated Sep 10, 2020
@CaerusKaru
Copy link
Member

If this is still a problem, can you please upgrade everything to the latest major versions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants