Bug ? <ion-checkbox> makes entire grid disappear

The presence of in a that is wrapped by an outer ion-item causes the entire grid to disappear. Remove the and all is well. I use grids extensively inside of lists to create carefully formatted list items in Ionic 1. Does not work in Ionic 2. It seems like it breaks the the template compiler. There is no markup for the grid after doing this.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

<ion-list>
    <ion-item>
        <ion-grid style="padding: 0px">
            <ion-row>
                <ion-col style="border: solid 1px">col1 <ion-checkbox></ion-checkbox></ion-col>
                <ion-col style="border: solid 1px">col2</ion-col>
                <ion-col style="border: solid 1px">col3</ion-col>
            </ion-row>
            <ion-row>
                <ion-col style="border: solid 1px">col1</ion-col>
                <ion-col style="border: solid 1px">col2</ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>
    <ion-item>
        <ion-grid>
            <ion-row>
                <ion-col style="border: solid 1px">col1</ion-col>
                <ion-col style="border: solid 1px">col2</ion-col>
                <ion-col style="border: solid 1px">col3</ion-col>
            </ion-row>
            <ion-row>
                <ion-col style="border: solid 1px">col1</ion-col>
                <ion-col style="border: solid 1px">col2</ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>

</ion-list>

Unexpected things inside <ion-item> need to be properly tagged. Add an item-content attribute to each of your <ion-grid> elements and all should be well. More details here.

Thanks!

That did the trick. It’s not really clear in that this hint is necessary in the page your referenced. Perhaps the authors will point out what constituted “unexpected things”. Ionic 2 is so different than Ionic 1. My bag of tricks and special knowledge for v1 is not helping with v2.

There are a bunch of components (mostly input controls) listed in the various parts of the “Item Placement” section. I would say anything not included there requires an explicit item-content, item-left, or item-right.