Vertically align center for a ion-card

Ionic Framework ionic-v3
1

Hi to everyone.
I’m developing a login form, so inside my <ion-content padding > I have an <ion-card> (used like a container of the login form) that I want to center vertically. I tried different ways with css flexbox and other css tricks but nothing worked for me! The card remains at the top of the page.
Can you help me please?

<ion-content >
  
    <ion-card id = "login-card">
        <form [formGroup]="signInForm" (submit)="doEmailPswLogin()" class="input">
            <ion-list>

              <ion-item>
                <ion-label fixed>Email</ion-label>
                <ion-input type="email" [(ngModel)]="email" formControlName="email"></ion-input>
              </ion-item>

              <ion-item>
                <ion-label fixed>Password</ion-label>
                <ion-input type="password" [(ngModel)]="password" formControlName="password"></ion-input>
              </ion-item>


              <div padding>
                <button ion-button color="primary" block [disabled]="buttonDisabled">Effettua il login</button>
              </div>

            </ion-list>
          </form>
    </ion-card>
</ion-content>

I do not have any kind of scss acting on this page. All the tests I did were useless (the card did not move a millimeter), except using margin-top on the card, but it’s not a correct way to do it, I would like to have something responsive!
Thank you in advance!

2

ok, i had to go nuts in scss to get anything to adjust in ion-card see below

  ion-grid {
    padding: 0 !important;
    ion-row {
      padding: 0 !important;
      ion-col {
        padding: 0 !important;

        ion-card {
          padding: 0 !important;
          ion-card-header {
            margin-top: 1px !important;
            margin-bottom: 1px !important;
          }
          ion-card-content {
            margin-inside: 1px !important;

            padding: 0 !important;

            ion-list {
              margin-inside: 1px !important;
              padding: 0 !important;

              ion-item {
                margin-inside: 1px !important;
                padding: 0 !important;

                ion-row {
                  ion-col {
                    p {
                      color: color($colors, secondary, base) !important;
                      font-size: small !important;
                    }
                    color: color($colors, secondary, base) !important;
                    font-size: small !important;

                  }

                }

              }

            }

          }
        }
      }
    }
  }
3

sorry but I don’t understand how the code you wrote can vertically center my card. I don’t have any row, coloumn, grid etc…I have only a ion-content and a ion-card inside.

4

:wink: well, it was just a copy an paste to show you that you need to drill down and put !important to get things to change, i just thru that up

5

I know !important and I use it, but the problem is that I didn’t found a way to center my card vertically…

6

sorry about that,

try this, you need to put in grid to get positioning

  <ion-grid style="height: 100%">
    <ion-row justify-content-center align-items-center style="height: 100%">
      <ion-card id = "login-card">
        <form >
          <ion-list>

            <ion-item>
              <ion-label fixed>Email</ion-label>
              <ion-input type="email"  name="email"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label fixed>Password</ion-label>
              <ion-input type="password"  name="password"></ion-input>
            </ion-item>


            <div padding>
              <button ion-button color="primary" block >Effettua il login</button>
            </div>

          </ion-list>
        </form>
      </ion-card>
    </ion-row>
  </ion-grid>
7 Likes
8

This works! Thank you so so much for your help :slight_smile:

9

Not Work For me, but this code work…
in file.scss

.login-box-centered {
transform: translateY(-50%);
top: 50%;
height: 40%;
left: 2.5%;
right: 2.5%;
position: absolute;
width: 95%;
}

in file.html

title

card content

1 Like