Stack Overflow
Stack Overflow

Questions tagged [angular-flex-layout]

Questions about the Angular Flex Layout layout engine

As of 2022, Angular Flex Layout is now in Long Term Support, and will no longer be supported at some point in the future. For alternative approaches, see the Modern CSS in Angular layouts post.

Angular Flex Layout is an Angular layout engine which provides a layout API that injects inline Flexbox, Grid and Media Query CSS styling.

449 questions
32
votes
7 answers

Set width on input mat-form-fields for angular material

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code: person.component.html
kroe761
  • 3,296
  • 9
  • 52
  • 81
23
votes
3 answers

How to center vertically with Angular Flex Layout?

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library. app.component.html login.component.html
Christian
  • 2,676
  • 3
  • 15
  • 25
22
votes
3 answers

Angular Material tab height

I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can't get it to work. The fxFill's don't seem to Fill and I am not sure if this is an issue…
Mad Eddie
  • 943
  • 3
  • 12
  • 23
20
votes
3 answers

Angular Flex Layout - Not working

I tried to use 2.0.0-beta.9 in my app, a simple test doesn't work
1. One
2. Two
3. Three
4. Four
displays columns instead of rows I think I am importing the library…
user1916077
  • 431
  • 1
  • 7
  • 18
19
votes
4 answers

Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rows

Using fxLayoutGap and wrap leaves an annoying margin at the end of each row that is wrapped. Is there a way to fix this? https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html
17
votes
2 answers

@angular/flex-layout How To: different class based on screensize?

Is there a way to have @angular/flex-layout change the class based on screen size? I know I can do this:
and this:
etc. I'd like to be able…
buzzripper
  • 371
  • 1
  • 3
  • 14
15
votes
2 answers

How set up Angular Material Footer via Flex-Layout

How set up the footer in my app (I use Angular Material) so that it: sticks to the bottom if the content height is less than view-port moves down / gets pushed down if the content height is more than view-port One more important thing - I would…
pax
  • 1,547
  • 2
  • 16
  • 46
14
votes
4 answers

Angular Material 2 Card Header Buttons set Right

I use the Angular Material 2 and I want in a card-header icon buttons. How can I set the buttons to the right side? My plan: Current Website: I want to set the buttons rop right in the header. How can i do it? I exlude the category code because…
Lyror
  • 924
  • 3
  • 10
  • 19
13
votes
5 answers

How to add margin with Angular Flex Layout?

How can I add margin or padding to a container when using the Flex Layout Module? Template:
hell
Simple card test …
Christian
  • 2,676
  • 3
  • 15
  • 25
13
votes
4 answers

Creating a layout with a fixed header, fixed sidebar, fixed content section using Angular Material / Flex-Layout in Angular

I am using Angular w/ Angular Material and Flex Layout I am attempting to create a layout for a web application that is exactly like this site. Notice the fixed header, fixed sidebar, fixed content pain. No browser scrolling is used, only div…
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231
12
votes
6 answers

Angular mat-table pagination not working, entire data is loaded on First page of mat-table

I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too. I have tried…
Jayant Belekar
  • 243
  • 1
  • 3
  • 9
12
votes
5 answers

Module not found: Error: Can't resolve '@angular/flex-layout' in '/app'

I suddenly got this error Module not found: Error: Can't resolve '@angular/flex-layout' in '\src\app' This error occurred After I have install @angular/cdk, After this error I have again installed flex-layout using npm install…
Talk is Cheap Show me Code
  • 2,095
  • 9
  • 23
  • 50
12
votes
3 answers

fxLayoutWrap not working

I've got these blocks of codes