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

Question

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

But on the desktop, it shows as below.

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.

Duannx · Accepted Answer · 2017-08-12T10:04:34.910

2

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

edited Aug 12 '17 at 10:04

answered Aug 12 '17 at 09:54

Duannx

7,501
1
26
59

Oh..Wonderfull.It is working.Thanks.Yes, I'm reading the doc.Can you please explain the magic you did above? – Sampath Aug 12 '17 at 09:59
No magic here. Ionic grid did all the job. I just add `col-lg-6` for `screen > 992px`, `col-md-6` for `screen > 768px` and `col-12` for all screen. `col-6` mean `width: 50%` and`col-12` mean `width: 100%` – Duannx Aug 12 '17 at 10:03
I have a confusion here is hence having only one column in the row.I know row can have maximum 12 columns.But when we give it `col-lg-6` for one column what will happen on a larger device?What is the difference of `col-lg-12` and `col-lg-6` when we have only one column? How it behaves? – Sampath Aug 12 '17 at 10:08
It is so hard to explain all in comment. Let take an example and you will understand. Just add `col-12 col-6 col-md-6 col-lg-6` to one col and inspect it in desktop screen view. You will see the difference. It is just css. If you still have confusion, please let me know. – Duannx Aug 12 '17 at 10:21
Yes, I did that and now it seems fine.One question: When this fire `col-12`? On which device size? – Sampath Aug 12 '17 at 10:22
`col-12` for devices have `screen-widh >= 0`. It means all devices. Context of `col- col-md col-lg`... is described very clearly in [doc](https://ionicframework.com/docs/api/components/grid/Grid/#default-breakpoints). Please take a look at it – Duannx Aug 12 '17 at 10:30
Can you tell me why we cannot use `align-items-center` instead of `justify-content: center;`? What does `align-items-center` do? It is not clear for me when I went to the doc. – Sampath Aug 12 '17 at 10:41
Oh. It is not related to ionic grid. It is [flexbox css](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). You can see difference beetwen them [here](https://stackoverflow.com/questions/35049262/difference-between-justify-content-vs-align-items) – Duannx Aug 12 '17 at 10:48
Oh..Great.Thank you so much for all the support.Now I have huge knowledge about this awesome grid system :) – Sampath Aug 12 '17 at 10:53
Glad to help :D. – Duannx Aug 12 '17 at 10:54
Another question:You can see that this hack here ``.I have used that to give a distance from header to `textbox` using `flex`.can I do that without that ugly hack? I need to give it as responsive way.Not just by using `margin-top`.Any thoughts? – Sampath Aug 12 '17 at 12:15
Depend of your html structure we will choose the way to add `margin-top`. But i think add an `ion-row` is not a good way. Please add a plunker contain your code. – Duannx Aug 14 '17 at 02:18

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

1 Answers1