logo
down
shadow

fxFlex angular flex layout not working as expected version 7.0.0-beta.19


fxFlex angular flex layout not working as expected version 7.0.0-beta.19

By : Bhavik Makvana
Date : November 21 2020, 04:01 AM
This might help you Todo : , You forgot to import FlexLayoutModule in app.module.ts
code :
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FlexLayoutModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


Share : facebook icon twitter icon
Flex not working as expected with nested angular material layout

Flex not working as expected with nested angular material layout


By : Revital
Date : March 29 2020, 07:55 AM
help you fix your problem After a lot of test I found an answer by myself: The percentage value of the flex="15" isn't evaluated correctly due to the missing height of its parents.
So to solve this problem, you have to apply a height of 100% to the nested flex container and all of its parents, as you can see in the sample below (therefore the layout-fill attribute isn't necessary anymore).
code :
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular Layout Issue</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
</head>

<body layout="column" layout-fill>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <div style="height: 100%;" flex="50" layout="row">
        <div style="height: 100%;" flex layout="column">
            <button flex="15">Flex="15"</button>
            <button flex>Flex</button>
        </div>
        <div style="height: 100%;" flex layout="column">
            <button flex>Flex</button>
            <button flex>Flex</button>
            <button flex>Flex</button>
        </div>
    </div>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js"></script>
</body>
</html>
Angular 6 fxflex not working with ngif div (if div is shown fxflex is not applied on it)

Angular 6 fxflex not working with ngif div (if div is shown fxflex is not applied on it)


By : Tim Beardsley
Date : March 29 2020, 07:55 AM
I wish did fix the issue. The *ngIf is not the problem here.
The problem comes from your mat-form-field.
code :
<div fxFlex = "20">
   <mat-form-field fxFlex="100">
        <input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
          required>
      </mat-form-field>
</div>
Angular flex-layout, grid size not working as expected

Angular flex-layout, grid size not working as expected


By : Vignes Arul
Date : March 29 2020, 07:55 AM
it helps some times Sorry if this is a really simple problem, just trying to get my head around angular flex grid.
code :
fxLayout="row"  
fxFlex.gt-*
<div fxLayout="row">
    <div *ngFor="let area of viewAreas" style="border: 2px solid red" [fxFlex.gt-sm]="area.layoutSize"
         [fxFlex.gt-xs]="area.layoutSize"
         [fxFlex]="area.layoutSize">
          {{area.areaName }} {{area.layoutSize }}
  </div>
</div>
Angular Flex cannot put items on the same line, Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

Angular Flex cannot put items on the same line, Angular 8.2.1 and Flex-Layout 8.0.0.beta 26


By : user3084209
Date : March 29 2020, 07:55 AM
around this issue To achieve expected result, use below css for the child div to inline-block elements
code :
.test div{
  display: inline-block
}
<div>
        <div class="test">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
Angular Material Flex-layout when using fxFlex with mat-form-field, the element does not appear in Internet explorer 11

Angular Material Flex-layout when using fxFlex with mat-form-field, the element does not appear in Internet explorer 11


By : Ido Nahshon
Date : March 29 2020, 07:55 AM
this will help I have found that in order for IE11 to work correctly with the mat-form-field, you need to wrap the form field in a div tag. No need to add any attributes to this div tag.
In order to achieve this form layout in IE 11... IE 11 Form Layout...
code :
<div flLayout="column" fxLayoutGap="7px" fxLayoutGap.xs="0px">
  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="7px" fxLayoutGap.sm="0px">
    <mat-form-field fxFlex appearance="outline">
      <mat-label>First Name</mat-label>
      <input matInput formControlName="firstName">
    </mat-form-field>
    <mat-form-field fxFlex appearance="outline">
      <mat-label>Last Name</mat-label>
      <input matInput formControlName="lastName">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field fxFlex appearance="outline">
      <mat-label>Title</mat-label>
      <input matInput placeholder="Title" formControlName="title">
    </mat-form-field>
  </div>
</div>
Related Posts Related Posts :
  • Test observable 'next' callback in RxJs and Angular
  • How to pass Form Control value to custom Validator Function's Parameter in Angular 5 Reactive Forms
  • Angular 6 - NullInjectorError: No provider for HttpClient in unit tests
  • How to get the text from a parent element only and not from its children - Protractor
  • Getter Methods on Deserialized Objects in Typescript
  • Child routes inside lazy loaded module not activated
  • Get "Day" of Selected Date in ngb-datepicker (ng Bootstrap) in Angular Application
  • Make nested HTTP calls from a Service Class and return Observable
  • Angular 6 reuse onclick event
  • Show loading indicator in Angular while waiting for a RxJS observable
  • ERROR TypeError: (intermediate value).share is not a function
  • angular 4 typescript validation error Object literal may only specify known properties
  • Angular, using one component in other two components
  • ngx-select-dropdown -- how to set default value for the dropdown? (angular 6.x)
  • Angular - reference child component dynamically
  • RXJS - Filter appears to filter, but results still show unfiltered
  • How to make changes on value which came with @Input - Angular
  • QR Scan in Angular
  • Angular / API consuming - request header - CORS proxy
  • Ng If does not work in observable variable in Angular 6
  • Angular Material 7: Link for whole row
  • How to customize PrimeNG TurboTable paginator?
  • ExpressionChangedAfterItHasBeenCheckedError when using ReactiveForms and NgbModal
  • Angular Material table with right-to-left direction
  • Angular 7 how to calculate the time a component take to completely load on the DOM
  • Observerable appending data over and over again on populate action
  • this is not a function - Angular 5
  • angular app runs in local tomcat but gives error in dev environment
  • Angular: Pass data from Material Dialog to component, which didn't open the dialog
  • Keep the the alert box without dismiss if there is an error
  • Textarea typing issue in ngFor in Angular 6
  • Combine requests in series - Angular 7
  • Display table for dyanamically created row in angular 5
  • ngFor does not render my obersavle response, but it does inset old values I add to the array?
  • Concat variable name in angular cli using ngFor
  • Angular 5 'inputClick' is declared but its value is never read
  • Angular 7 - getting error as `Module parse failed: Unexpected character '@'` how to fix this?
  • RxJs subscribeTo.js observable check works in Chrome, but fails in Chrome Incognito, MS Edge, and Firefox
  • Getting the error: Could not find column with id "id"
  • Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks
  • Angular - use a service in a function and this function in a pipe
  • How to dynamically call the parent methods from child component?
  • Trigger same function in different component
  • Angular 7 error RangeError: Maximum call stack size exceeded
  • Maximum call stack size exceeded when adding PWA in Angular
  • angular reactive forms remove formArray elements after save
  • check whether angular array object has a specified value or not
  • While using moment in Angular 7 getting Error:TypeError: moment is not a function
  • Cannot set property 'filterPredicate' of undefined error in Angular Material Table
  • Angular 2+ Animation: Adding checkbox check effect to individual checkboxes that are generated by a loop
  • I am having issue in checking whether a username exists or not in my angular 6 application via api
  • How can I convert an ionic http GET request from @angular\Http to @ion-native\Http?
  • fa-icon is not a known element in a Reusable Module
  • Angular 6: Is it possible to pass a function as parameter?
  • Angular Reactive Forms with FormArray inside a nested FormGroup
  • Angular: Right way to wait for Async data to be loaded
  • NgRX effect called with empty state
  • How do you create a union type for a component's services?
  • Angular6 - Using service outside of constructor - error as undefined
  • How to import a service from another module in Angular 6
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org