How to align text on ion-button tag to left

February 20, 2019, 11:46 pm

≫ Next: How to create IONIC component for intl-tel-input in IONIC 3

I wanted to align my icons and text on my button to the left but seems like it doesn’t work in my case. I tried declaring through HTML class and ID and applying text-align: left; and following the solution at this post from stack overflow but it only seems to work in Ionic v2.

Here’s how it looks like with the codes below.
menuss

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\Johndel\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 8.1

profile.component.html

<ion-content>
  <div id="profileCover">

    <div id="coverTopRightMenu">
      <ion-icon name="cart"></ion-icon>
      <ion-icon name="chatboxes"></ion-icon>
    </div>

    <img src="../../../assets/profile/cover.jpg">
    <img id="accPic" src="../../../assets/profile/accPic.png">

    <div id="coverMenu">
      <ion-button color="primary">SIGN UP</ion-button>
      <ion-button id="btnLogin">LOGIN</ion-button>
    </div>
  </div>

  <div id="menu">
    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="today"></ion-icon>
        </ion-col>
        <ion-col>My Purchases</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="heart-empty"></ion-icon>
        </ion-col>
        <ion-col>My Likes</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="time"></ion-icon>
        </ion-col>
        <ion-col>Recently Viewed</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="mail-unread"></ion-icon>
        </ion-col>
        <ion-col>Refer a Friend</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="logo-bitcoin"></ion-icon>
        </ion-col>
        <ion-col>My Shopee Coins</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="star-outline"></ion-icon>
        </ion-col>
        <ion-col>My Rating</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="contact"></ion-icon>
        </ion-col>
        <ion-col>My Account</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="help-circle-outline"></ion-icon>
        </ion-col>
        <ion-col>Help</ion-col>
      </ion-row>
    </ion-button>
  </div>
</ion-content>

profile.component.scss

#menu{
    vertical-align: bottom;
}

#menu > ion-button {
    height: 80px;
}

#accPic{
    position: absolute;

    top: 18vh;
    left: 5vw;

    border-radius: 50%;
    width: 15vw;
    height: 15vh / 2;

    background-color: silver;

    border: 0.5vh solid white;
}

#profileCover > #coverMenu{
    position: absolute;
    top: 22vh;
    left: 60vw;

    width: 100vw;
}

#profileCover > #coverMenu > ion-button{
    width: 18%;
    height: 5vh;

    font-size: 50%;

    background-color: transparent;

    padding-left: 5px;
}

#coverTopRightMenu{
    position: absolute;
    left: 80vw;
    width: 100vh;
}

#coverTopRightMenu > ion-icon{
    margin: 1vh;
}

ion-icon{
    width: 5vw;
    height: 5vh;
}

Posts: 1

Participants: 1