December 2, 2018

Material 2: Sticky Footer with Mat Sidenav

My guess is your using Angular in combination with Angular Material and you desperately need a sticky footer, ideally, in a variable height. No need to look any further. This article will provide you with a basic solution for given circumstances.

This article was updated and tested for Angular 7 and Material 2 Version 7.1.1

A very common use case for the Sidenav of Material 2 is the use in a layout with a sticky footer. Unfortunately, the documentation of the <mat-sidenav> does not show how to do this best. But that’s not a big deal, because you can achieve your goal quickly if you know how to use Flexbox.

We assume that routing is used. In addition to the sticky footer, we want to make sure that the component that is included via routing also takes on the full height. In order to do so we add a display:block; and and flex:1; to first level children of our main HTML tag.

You can find a demo here. And this is the repository.

Below is a shortened version of the template for our Sidenav (demo location: src/app/app.component.html).

The corresponding styles can be written in the global styles.scss or in the corresponding style sheet (demo location: src/app/app.component.scss).

And that’s it. Happy coding!

Related Posts

Christian Heitmann
Developer at thecodecampus </>


12 responses to “Material 2: Sticky Footer with Mat Sidenav”

  1. andy says:

    Thank you for the tips. Will give it a go now

  2. Bryan says:

    Thanks – nice solution

  3. boccione says:

    Ciao, thx for your demo. I have only one dubt, perhaps unsurpassable :
    In the demo, the route ‘Bar’, Chrome for mobile doesn’t show the footer, there is the navigation bar that hides the footer and you have to scroll. So… i dont’t know… is it unsurpassable?
    grazie

  4. Zikku says:

    Thanks – nice solution. But can you help me when the sidenav should not overlap the toolbar? So the mat-toolbar is outside the mat-sidenav-container. I have problems with the page-wrap and the min-height etc.

  5. ricardo9300@gmail.com says:

    Thanks! good solution!

  6. pktechie says:

    plz update the code for angular 6, here footer is not working, thx in advance.

  7. Philippfx says:

    Please update for Angular 6. It doesn’t work for me either.

  8. Sebastián says:

    For angular >= 6, change your content class as this:

    source: https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api

  9. aspixx says:

    I checked it and it almost works on Angular 8.x
    <mat-sidenav-content class="page-wrap ..."> does not work as the material library adds the .mat-drawer-content class, containing a display: block style, which overrides the display: flex from ‘page-wrap’.
    By wrapping the child into a and assigning page-wrap makes it work again. So like this:

  10. Edward says:

    Yay google is my world beater assisted me to find this
    great website!

  11. Karlismam says:

    Hello!
    I I apologize but most likely this question is already somewhere here and discussed, in the search I did not find anything unfortunately.
    Searched for information in World Wide Web, blogs , blogs , thematic and news sites, etc.
    Many googles and readers about affiliates sra . I’m not really understood where appeared visitors to my sites?

    P.S.
    Thank you for any advice)
    You can reply to the mail: carltonkarlis@gmail.com

  12. Aaro says:

    Thanks so much, you helped me big time ! You’re the only documentation on how to make a sticky footer on Angular. Found your tutorial and it was my last hope: it turned out to be successful so once again, a huge THANK YOU!

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.