CODEWITHSUNDEEP
ionic-framework
Riddhi Shah
Riddhi Shah

Reputation: 3122

align form in the center in ionic

I am trying to make a form in ionic. I wanted that form in center of the screen. Can anyone help me with that?

Here is my code:

my-form.html:

<ion-header>
<ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>My First Form</ion-title>
</ion-navbar>
</ion-header>
 <ion-content padding>
      <h3 ion-text text-center color="primary">My Form</h3>

      <ion-list inset class="ilist">

          <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>

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

    </ion-list>

    <div padding>
        <button ion-button color="primary" block>Sign In</button>
    </div>

  </ion-content>

my-form.scss

page-my-form{
.ilist{
    justify-content: center;
    align-items: center!important;
    }
}

Upvotes: 1

Views: 6010

Answers (2)

Utpaul
Utpaul

Reputation: 2007

If you want to ion-content element in center then i will serve you some code.

You need to change in .scss like

  .scroll-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }

If you want only form element in center then its require some tricks. If needed i also solve it..

Need to change in .html

  <div class="row styling-row" >
    <div class="col" text-center>
      <h3  color="primary">My Form</h3>
    </div>
  </div>

  <div class="row header">
    <div class="col" text-center>
      <ion-list inset>

        <ion-item>
          <ion-label floating>Username</ion-label>
          <ion-input type="text" value=""></ion-input>
        </ion-item>

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

      </ion-list>
    </div>
  </div>

  <div class="row styling-row">
    <div class="col" text-center>
      <button ion-button color="primary" block>Sign In</button>
    </div>
  </div>

</section>

Also need to change in .scss file

  .home-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .home-container > .row {
    -webkit-flex: 1;
  }

  .header {
    -webkit-flex: 1.3 !important;
    -webkit-align-items: center;
  }

  .styling-row {
    -webkit-align-items: center;
  }

Upvotes: 1

Prashant
Prashant

Reputation: 1385

I have achived it using ion-grid

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <Your FORM CONTROLS>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

and for vertical center, you should add style for grid

ion-grid {
    height: 100%;
    justify-content: center;
}

Upvotes: 2

Related Questions