Ionic-framework: ion-grid doesn't render correctly in ion-item

[norbertbede]

Bug Report

Ionic version:


[x] 4.x RC1

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

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

our business app v3 example

Steps to reproduce:

1. create ionic4 rc1 project
2. add bellow code
3. 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]

[abennouna]

You may want to apply a full width on the ion-grid as a workaround.

[brandyscarney]

Content in an ion-item is now required to be wrapped in an ion-label. In v4 we do less "magic" to an item, so we are no longer placing it in the label for you. Please see the breaking changes for more information: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#label-required

Here is a codepen that shows your example with a label wrapper: https://codepen.io/brandyscarney/pen/MZLwzR

Thanks!

[brandyscarney]

Actually the more I think about it maybe grid should be an exception to this rule - maybe we can just add flex: 1 to the ion-grid and if that has no negative effects we could allow this markup to work. Thoughts @manucorporat?

[trazek]

@brandyscarney I'll make your recommended change and see if anything odd crops up

[trazek]

@brandyscarney I checked the visual tests in core and didn't see any negative impact of adding this style.

https://github.com/ionic-team/ionic/pull/17258

[brandyscarney]

@trazek Awesome, thank you! I will take a look!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.