Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ion-grid doesn't render correctly in ion-item

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x RC1

Current behavior: ion-grid doesn’t render grid layout - all columns are centered

wrongbehaviour

Expected behavior: ion-grid must have same behavior inside ion-item as normally/without

our business app v3 example ionic3-grid-inside-item2

Steps to reproduce:

create ionic4 rc1 project
add bellow code
see result

Related code:

    <ion-item > 
        <ion-grid >
            <ion-row >
              <ion-col>
                <div>
                  1 of 2
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 2
                </div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <div>
                  1 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  3 of 3
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
      </ion-item>

Other information:

this is important to create complex business applications with many informations - in master detail mode - eg. inventory countlist and their lines. (product code, name, qty, location…etc.) grid allow organise it in v3 well.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS [Mojave]