Ionic 2 fabs list not working


#1

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:

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

Thank you very much in advance!


#2

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>


#3

Man, I copied and pasted your code and it did not work for me.
see how it was:

It seems that he is not carrying any specific css fabs.
Could you have to do some import?
Thank you!


#4

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


#5

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!


#6

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


#7

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