Ionic2 Floating button not working


#1
<ion-fab right bottom>
            <button ion-fab color="light" style="z-index:100"><ion-icon name="add"></ion-icon></button>
            </ion-fab> 

it is inside ion-content. But it is getting scroll and also showing in left side.i tried many solution given by others bt non of them worked for me


#2

get solved by this way.

<ion-fixed class="fixed-div">
        <button fab fab-right fab-bottom danger  (click)="navigateAdd()">
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fixed>
</ion-content>

<style>
    .fixed-div 
        right: 0;
        bottom: 0;
    }
</style>

#3

Hmm, that second one doesn’t seem right. The first snippet is the correct way to create this UI.

Can you provide a more complete example?

<ion-content>

  <ion-fab right bottom>
    <button ion-fab color="light"><ion-icon name="add"></ion-icon></button>
  </ion-fab>

</ion-content>

#4

here is my code which is not working.

<ion-header class="ED">
    <ion-nav-bar>
        <ion-nav-title>
            Event Manager
        </ion-nav-title>
    </ion-nav-bar>
</ion-header>
<ion-content class="list" >
    <ion-card>
        <ion-list *ngFor="let l of list1" (click)="openPage(l)">
            <ion-item   >
                <p>   {{l.title}} </p> <p >{{l.des}} 
                </ion-item>

        </ion-list>
    </ion-card>

    <ion-fab right bottom>
            <button ion-fab color="light" style="z-index:100"><ion-icon name="add"></ion-icon></button>
            </ion-fab>
</ion-content>

#5

I’m not able to replicate using the latest RC. It’ stays where it’s supposed to without any issues.


#6

whenever i find anything abt it , any mistake in my side. i will post abt it


#7

Same problem here. Did you solved it?

Thank you


#8

i was using Visual studio 2015. lot of libraries was not upto date. what is your package.json dependencies.