Ionic 3 Grid on Larger device is not working as expected (Hope I did it wrongly)

I'm using Ionic 3 flexbox grid system as shown below.This is a Modal `controller.

.html

<ion-content class="content">
  <ion-grid no-padding>
    <ion-row class="header">
    </ion-row>
    <ion-row padding class="details">
      <ion-col>
        <form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
          <ion-item>
            <ion-label>
              <ion-icon name="person"></ion-icon>
            </ion-label>
            <ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
          </ion-item>
          <button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
          <ion-item no-lines>
            <ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
          </ion-item>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

.scss

 .content {
        ion-grid {
            height: 100%;
        }
        .header {
            flex: 1;
        }
        .details {
            flex: 3;
        }
    }

Mobile device - No issues

enter image description here

But on the desktop, it shows as below.

enter image description here

Q: It seems very bad on a larger device.How can I keep the same kind of ratio (I mean small sizes on components for Button and textbox) and centered the content on the larger device too? Hope you'll give the suggestions for this.

1 answer

  • answered 2017-08-12 09:37 Duannx

    You can use col-sm-, col-md-... to change item size in different screen size:

    <ion-row padding class="details">
          <ion-col col-lg-6 col-md-6 col-12>
            <form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
              <ion-item>
                <ion-label>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
              </ion-item>
              <button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
              <ion-item no-lines>
                <ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
              </ion-item>
            </form>
          </ion-col>
    </ion-row>
    

    and to center item:

    .details{
       justify-content: center;
    }
    

    See more about ionic grid