Angular 7 and Flex Layout 7.0.0-beta.24

0
votes

I upgraded my project to Angular 7 and with Flex Layout 7.0.0-beta.24. and I have noticed that some issues are presenting that I was not experiencing previously.

When I open up an element all the inner elements are inline (before) and should display in a column. Closing and opening the element then stacks the elements in a column as expected(after).

I have tried changing the height of the element in css as I read that this might be the cause but it is not. Since the project was working in a previous version I dont want to jump in and make changes incase this is a bug and will be fixed in a new release.

Is anyone experiencing anything similar?

enter image description here

2
angularangular-flex-layout

2 Answers

1
votes

Did you try adding this to your import?

FlexLayoutModule.withConfig({
  useColumnBasisZero: false,
  addFlexToParent: false,
}),
0
votes

I managed to fix this by adding an extra div that contains my flex-layout but I am not entirely sure why this fixed the issue. The loader-box displays while the messages are retrieved in the background. It was causing the layout issues.

Fix

<div class="loader-box" *ngIf="window.isLoadingHistory">
                <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">
                    <mat-spinner class="ele-text-color-grey" [mode]="'indeterminate'" [diameter]="50" strokeWidth="5">
                    </mat-spinner>
                    <p mat-caption class="ele-text-color-grey">Loading history...</p>
                </div>
            </div>

Original:

<div class="loader-box" fxLayout="column" fxLayoutAlign="center center" fxFlex="100%" *ngIf="window.isLoadingHistory">
                <mat-spinner class="ele-text-color-grey" [mode]="'indeterminate'" [diameter]="50" strokeWidth="5">
                </mat-spinner>
                <p mat-caption class="ele-text-color-grey">Loading history...</p>
            </div>