CODEWITHSUNDEEP
angularflexboxmaterial-design
Ryan Langton
Ryan Langton

Reputation: 6160

Angular 2 flex-layout height 100%

Angular app using Material design and flex-layout. https://github.com/angular/flex-layout

I'm trying to create a simple page layout of 2-columns on top (left=fill, right=10%), followed by a single row on the bottom of the screen. The elements are still only filling just the vertical space required for the content. The only way I've found to do this is to manually set height to 100%. Is that how I have to do it? What is wrong with this html?

<div fxLayout="column">
  <div fxLayout="row" fxFlex="90%">
    <div fxFlex="80%" class="border">
      <p>Stuff is happening here</p>
    </div>
    <div fxFlex="20%" class="border">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </div>
  <div fxLayout="row" fxFlex="10%" class="border">
    <p>Bottom element</p>
  </div>
</div>

Result:

enter image description here

Upvotes: 19

Views: 38671

Answers (3)

sandiejat
sandiejat

Reputation: 3141

For someone looking to do this in Angular 7, here are the possible outputs using Flex. From the illustration is the question, I'm a tad confused about the required output. So I'm laying out all three scenarios, snapshots of the output and a stackblitz playground for you to try.

1st Case The bottom div is filled with the remaining height and the text is aligned to the bottom. 1st Case - https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

If that's what you are after, the only change required in the code is the bottom div section

<div fxFlex fxLayoutAlign="start end" class="bottom-div">
    BOTTOM ELEMENT: This div is filled and text is aligned in the end
</div>

2nd Case Similar to 1st. But the text is aligned in the center Case2: https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

<div fxFlex fxLayoutAlign="start center" class="bottom-div">
BOTTOM ELEMENT: This div is filled and text is in center
</div>

3rd Case The bottom div itself is aligned to the bottom and not filling up the remaining vertical space.

Case3 https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html If that's what you are after, here is the change:

<div fxFlex="20" fxLayoutAlign="start center" class="bottom-div">
    BOTTOM ELEMENT: This div is just 20 and aligned to the bottom
</div>

Stackblitz Playground https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

Might help someone visiting it in later version of Angular.

Update Oct06, 2020: Revisited my answer today and realized that reference to Angular version seems irrelevant; the solution is moreover 'flex dependent'. I have removed the version of Angular from the answer.

Upvotes: 8

OZONO
OZONO

Reputation: 382

I have just stumbled upon this question because I had a similar problem and I solved it in a more (I believe) consistent way by using the attribute fxFlexFill of the library FlexLayout, without manually adjusting the CSS properties. In your specific case you I would include the attribute fxFlexFill in the first div element as follows:

<div fxLayout="column" fxFlexFill>
    ...
</div>

I hope this helps. Massi

Upvotes: 11

Alexandre Couret
Alexandre Couret

Reputation: 454

Setting height to 100% is probably the way to go indeed. Height is dynamic so it will adapt to your content. In your case the content doesn't fill the page so that's a normal behavior.

What's wrong with this solution though ?

Upvotes: 6

Related Questions