CODEWITHSUNDEEP
cssangularangular-materialangular-directive
Saif
Saif

Reputation: 1905

adding Sticky FAB in Angular 2 Material

I want to add a sticky button at the bottom of screen (not page) in my angular 2 material project. I tried some tweaks but currently when I scroll down the button doesn't stays where it was supposed to be.

before scroll it looks like below:

before scroll

after scroll:

after wcroll

Elements's HTML inside template:

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

CSS Applied on the Element Except for any defaults:

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}
  1. How can I fix this?
  2. Additionally is there any built in way with Angular material to do what I want?

UPDATE:

My main component's Template:

<toolbar></toolbar>
<side-nav></side-nav>

Side Nav's Template:

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

and its CSS:

#sidenav-container { // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;
}

and then inside the component added by the router-outlet will come FAB element.

Notes-list component's template (the one shown in the images):

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

LIVE DEMO

Upvotes: 2

Views: 10572

Answers (2)

user1850630
user1850630

Reputation: 171

You are correct to put the router-outlet within the md-sidenav-container.

Add the follow class to your FAB element.

.md-fab-bottom-right2 {
    top: auto !important;
    right: 20px !important;
    bottom: 10px !important;
    left: auto !important;
    position: fixed !important;
}

This is how I got it to work.

Upvotes: 12

Aravind
Aravind

Reputation: 41571

Add a custom class and apply your styles also look for the hierarchy in which files are referenced to DOM

<div class="example-container">    

  <h3>sticky icons</h3>
  <a class="mine" md-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>
  <a md-mini-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>

</div>

LIVE DEMO

Update 1 : You are using the icon inside the md-sidenav container which is a mistake

<div class="example-container">
  <md-sidenav-container>

    <md-sidenav #sidenav>
      <p>side nav works</p>
    </md-sidenav>

  </md-sidenav-container>
    <p>content</p>
    <a class="mine" md-fab (click)="sidenav.open()">
      <md-icon>check</md-icon>
    </a>

</div>

Updated Demo

Update 2 :

Look at the below code, you are wrapping everything inside sidenav which is wrong. Use as below

<md-sidenav-container id="sidenav-container">    </md-sidenav-container>
        // contents
    <router-outlet></router-outlet>

Upvotes: 1

Related Questions