CODEWITHSUNDEEP
angularionic-frameworkionic3
Mudasir Bhutto
Mudasir Bhutto

Reputation: 468

Align ion-fab buttons horizontal center

I’m new to ionic.This is my first ever question on ionic. Hope I’ll get the proper solution from ionic experts:

So basically, I’ve 3 ion-fab button for social logins and I want to align them horizontal center like this: enter image description here

I tried many solutions, but no luck. Here’s my code:

  <ion-fab bottom center>
<ion-row text-center>
  <ion-col>
    <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
  </ion-col>
  <ion-col>
    <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-col>
  <ion-col>
    <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
  </ion-col>
</ion-row>

This is what I'm getting using above code. So, where I'm wrong? enter image description here

Upvotes: 2

Views: 5417

Answers (2)

davejoem
davejoem

Reputation: 5482

A little late but you can try doing this 

<ion-grid>
  <ion-row nowrap>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="primary">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="secondary">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="tertiary">
        <ion-icon name="logo-instagram"></ion-icon>
      </ion-fab-button>     
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="danger">
        <ion-icon name="settings"></ion-icon>
      </ion-fab-button>
    </ion-col>
  </ion-row>
</ion-grid>

Screenshot

Upvotes: 1

Sabyasachi Patra
Sabyasachi Patra

Reputation: 680

Remove the center attribute from the ion-fab tag like this

  <ion-fab bottom>
    <ion-row text-center>
      <ion-col>
        <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
      </ion-col>
    </ion-row>
  </ion-fab>

in your scss file add this style

  ion-fab{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

Screenshot

Here is a nice guide to flexbox.

Upvotes: 9

Related Questions