Ionic 2 fabs list not working

Hello, can anyone help me with the problem in fabs list?

My code is as follows:

<ion-fab right bottom>
    <button fab fab-left fab-bottom danger fab-fixed>
      <ion-icon name="add"></ion-icon>
    </button>
    <ion-fab-list side="left">
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>

This code is the same as example of ionic docs this github.

as follows appears in my app:
image

If anyone knows what I can do, please help me.

Thank you very much in advance!

just tested your code…

works fine for me… just had one correction…

<ion-fab right bottom> <button **ion-fab**

this is your code that worked for me:

<ion-fab right bottom> <button ion-fab fab-left fab-bottom danger fab-fixed> <ion-icon name="add"></ion-icon> </button> <ion-fab-list side="left"> <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button> <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button> <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button> <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button> </ion-fab-list> </ion-fab>

image

1 Like

Man, I copied and pasted your code and it did not work for me.
see how it was:
image
It seems that he is not carrying any specific css fabs.
Could you have to do some import?
Thank you!

are you importing all the ionic scss files in your variable.scss file?

1 Like

This is my app.variables.scss file

// http://ionicframework.com/docs/v2/theming/

// Ionic Shared Functions
// --------------------------------------------------
// Makes Ionic Sass functions available to your App

@import "globals.core";

// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files. Setting
// variables before Ionic's Sass will use these variables rather than
// Ionic's default Sass variable values. App Shared Sass imports belong
// in the app.core.scss file and not this file. Sass variables specific
// to the mode belong in either the app.ios.scss or app.md.scss files.


// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
// Both iOS and MD colors can be further customized if colors
// are different per mode.

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);

Thank you!

i’m getting the same issue … did you find a fix ?

Hello @gsimonpotla
Yes I found it. My problem was the version of ionic.
Updated the version to 2.0.0-ionic rc.0 and worked