CODEWITHSUNDEEP
angularangular-flex-layout
mpssantos
mpssantos

Reputation: 1001

Angular Flex Layout: Holy Grail Design

I am trying to create a simple page using Angular Flex Layout. (Actually a I am removing Bootstrap from the application because I am using Angular Material and feel that mixing them is not a good thing). My goal is to set a main page using the "Holy Grail Layout" by just having a Header, Content and Footer.

|------------------------------------|
|              Header                |
|------------------------------------|
|                                    |
|              Content               |
|                                    |
|------------------------------------|
|              Footer                |
|------------------------------------|

Following is the code

app.component.html

<div class="main-container" fxLayout="column">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

app.component.css

.main-container {
  min-height: 100vh;
  border:1px solid black;
}

home.component.html

<div>
  home works!
</div>

home.component.css

div {
  margin: 1px 0px 1px 0px;
  padding: 1px;
  border: 1px solid blue;
  height: 100%;
}

I was expecting that the home component occupies the 100% of the height of the parent, but as we can see by the blue border on the screenshot just below it is not responding on that.

enter image description here

The home-component div is inserted by angular with the element as expected, which does not have any styling. But that should not affect in anything the child elements.

If i set the div height on the home-component to lets say 200px (height: 200px) it grows, but i need it to occupy 100% of the parent defined on the app.component-html.

Different approach

I tried not take in consideration the < router-outlet > element (similar code was substituted by a div with "content" id) but the result is the same:

app-component.html

<div class="main-container" fxLayout="column" fxLayoutAlign="start stretch">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
      <div id="content" fxFlex fxFlexAlign="stretch" fxLayout="row" fxLayoutAlign="start center" style="height: 100%">
        <div fxFlex="auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 1
        </div>

        <div fxFlex="4 0 auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 2
        </div>
      </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

The best was able to achieve is to center the div with the "content" ID, but it does not occupy 100% of the height of its parent as the below picture shows:

enter image description here

I was expecting the fxFlexAlign="stretch" or even fxLayoutAlign="start stretch" instead of fxLayoutAlign="start center" on the "content" div would force it to occupy the 100% height.

Can anyone spot and/or explain me what I am doing wrong? Is this a good approach? Is there a better or smarter way to doing it so?

I am using the official documentation https://github.com/angular/flex-layout/wiki/fxFlex-API

Can someone points me to an example on the internet? I could not find one using Angular Flex Layout.

Thank you

Upvotes: 5

Views: 5527

Answers (1)

Quentin
Quentin

Reputation: 1933

OK, I tried to reproduce your problem on Stackblitz and here is the result: Stackblitz HERE

app.component.html :

<div fxFlexFill fxLayout="column" style="padding: 5px">
  <div fxFlex="none" style="border:2px solid black;">
    <app-header></app-header>
  </div>

    <div fxFlex style="border:2px solid black;">
      <router-outlet></router-outlet>
    </div>

  <div fxFlex="none"style="border:2px solid black;">
    <app-footer></app-footer>
  </div>
</div>

home.component.html :

<div fxFill fxLayout="row">
  <div fxFlex style="border: 1px solid blue; padding: 2px">
    col 1
  </div>

  <div fxFlex="70" style="border: 1px solid blue; padding: 2px">
    col 2
  </div>
</div>

DEMO:

enter image description here

And all that was done with Flex-Layout. I hope this will help you.

PS: You should be careful not to change the height, this can be a problem with Flex-Layout. Use "fxFlex", "fxFill" or "fxFlexFill" instead. (Documentation)

I saw that you were using "fxFlexAlign" but I do not think it exists for Flex-Layout. You have to use "fxLayout" and "fxLayoutAlign" to put in column, or online. Here is a site that helped me a lot for Flex-Layout (Angular Flex-Layout Demos)

Actually a I am removing Bootstrap from the application because I am using Angular Material and feel that mixing them is not a good thing

It is true that using both is not necessarily very good, especially if you use the bootstrap "col" with "flex" of Flex-Layout, but some bootstrap things remain useful to use as "margin" or "padding" which are very simple. So I keep boostrap basically for that.

Upvotes: 11

Related Questions