CODEWITHSUNDEEP
cssangularangular-material2
Iancovici
Iancovici

Reputation: 5731

How to force angular material 2 sidenav content from bottom

have been trying several places in css to override existing sidenav component in angular material 2 

mat-sidenav-container {
   background: white;
   bottom: 0px !important; /* <---- no help */
}
mat-sidenav {
   width: 300px;
   height: 500px;


   padding-left:20px;   /* Not sure why content goes out of range*/
   bottom: 0px !important; /* <---- no help */
}

Trying to make sidenav content start from bottom in this example but I can't seem to override anything in this component provided by angular material 2

Upvotes: 1

Views: 5473

Answers (1)

mohit uprim
mohit uprim

Reputation: 5334

To achieve this, there is no need to override the .mat classes style. Use the following css to place the content at bottom.

Side-nav content:

 <div class="inner-content" id="botNav" mat-list-item>
    <button mat-button *ngFor="let app of apps">{{ app }}</button>
 </div>

Css to place the content:

.inner-content{
  position: absolute;
  bottom: 0;
  left: 0;
}

Demo: https://plnkr.co/edit/GZroFhKjuXhtYu7bvgPK?p=preview

Upvotes: 4

Related Questions