CODEWITHSUNDEEP
cssionic-frameworkvertical-alignmentflexbox
user818700
user818700

Reputation:

Vertically align column in row in Ionic

I have the following ion-view :

<ion-view view-title="Success" ng-controller="successController" class="success-view">
  <ion-content>

    <div class="row row-center">
      <div class="col">

        <h1>Success!</h1>

        <h3>Your login credentials will be SMSed to you shortly</h3>

        <button class="button button-block button-positive" ui-sref="login">
          Okay
        </button>

      </div>
    </div>

  </ion-content>
</ion-view>

I'm trying to vertically align that col in there in the screen. Now I understand that the only way this is going to work is if my row takes up 100% of the height. Yet if I go ahead and add style="height: 100%;" to my row it doesn't work, the row's height still wraps to it's contents. Even if I add !important it still doesn't span the full height of the screen... Any ideas?

Upvotes: 9

Views: 11854

Answers (1)

m4n0
m4n0

Reputation: 32275

Seems like Ionic framework adds a dynamic class scroll wrapping the row. Add a height: 100% to the parent scroll as well.

.row, .scroll {
  height: 100%;
}

Output:

enter image description here

Ionic Demo

Upvotes: 13

Related Questions