CODEWITHSUNDEEP
cssangularjsmaterial-designangular-material
Julo0sS
Julo0sS

Reputation: 2102

Angular 2 + Material 2 : Sticky Footer with a md-toolbar

I actually try to make a sticky footer within an angular2/Material2 app, from a md-toolbar component.

Maybe this is just not an appropriate element, but this would be nice to make it this way since it would fit the app style with no additionnal code.

I am using Angular 2 (CLI), Material2 (https://github.com/angular/material2) and Flex Layout (https://github.com/angular/flex-layout)

Here is a sample code of what the app looks like : 

<md-sidenav-container class="sd-layout">
    <md-sidenav #sidenav class="app-sidenav" mode="push">
        //My links in the sidenav
    </md-sidenav>
    <md-toolbar color="primary">
        //Here is the "REAL" toolbar, on top of page, with app name, and so on
    </md-toolbar>
    <router-outlet>
        //Here is the application display, routing, navigation, security, all the magic happens here
    </router-outlet>
    <my-footer>
        //Here is the custom footer I tried to make... 
    </my-footer>
</md-sidenav-container>

So, basically, nothing weird in this code... Now, the footer template item : 

<md-toolbar class="footer">
    //Here is my footer
</md-toolbar>

CSS "footer" Class holds this : 

.footer {
    position:relative;
    right:0;
    left:0;
    bottom:0;
}

Once again, nothing magic... At this point, the footer appears directly under the router-outlet. Nice, but not enough : if the router-outlet is empty or not tall enough to fit the page (device height), then it leaves an empty space under it, so we got this kind of display :

enter image description here

What I'd like to get as result :

enter image description here

Thanks for reading / help

Upvotes: 3

Views: 6605

Answers (2)

Ravi Rajpurohit
Ravi Rajpurohit

Reputation: 528

In order to set the footer always at bottom you can try the below code

<mat-sidenav-container class="container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>
    <div fxLayout="column" style="height:100vh;">
        <div fxFlex>content goes here</div>
        <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div>
    </div>
</mat-sidenav-content>

Here i have created a demo using Angular Material anf Flexlayout

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

and have a look at my git repo

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

Upvotes: 0

xeofus
xeofus

Reputation: 774

You can use this: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

<div class="maindiv">
<md-toolbar>your toolbar</md-toolbar>
<md-sidenav-container>your menu</md-sidenav-container>

    <div class="site">
      <div class="content">
        <router-outlet></router-outlet>
      </div>
      <footer>
          <p>footer</p>
      </footer>
    </div>
</div>

end css:

.maindiv {
  min-height: 100vh;
}

.site{
  display: flex;
  flex-direction: column;
  min-height: 94vh;
}

.content{
  flex: 1;
}

Upvotes: 1

Related Questions