Placing ion-grid inside ion-item showing empty rows

Looks like placing ion-grid inside ion-item is not allowed in ion-list. Below is the code.

<ion-navbar primary *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Orders</ion-title>
</ion-navbar>
<ion-content>
<ion-list>
    <ion-item  *ngFor="let order of orders">
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-icon name="pie" item-left></ion-icon>
          </ion-col>
          <ion-col>
            <ion-label>{{order.number}}</ion-label>
            <ion-label>{{order.quantity}}</ion-label>
          </ion-col>
          <ion-col>
            <ion-label>{{order.productType}}</ion-label>
            <ion-label>
              <ion-icon name="calendar"></ion-icon>{{order.date}}</ion-label>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>
</ion-content>
import {NavController} from 'ionic-angular';
import {OrderDetailsPage} from '../order-details/order-details';
import {Component} from "@angular/core";

/*
  Generated class for the OrdersPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/orders/orders.html',
})
export class OrdersPage {
  productTypes: Array<any>;
  statuses: Array<any>;
  orders: Array<any>;
  constructor(public nav: NavController) {
    this.productTypes = [{ id: 1, name: "Sand" }, { id: 2, name: "Gravel" }, { id: 3, name: "Crushed Stones" }];
    this.statuses = [{ id: 1, name: "Approved" }, { id: 2, name: "Rejected" }, { id: 3, name: "Delivered" }];
    this.orders = [
      { id: 1, number: "FOYER-01", productType: "Sand", quantity: "1500", date: "16-05-2016" },
      { id: 2, number: "FOYER-02", productType: "Gravel", quantity: "3500", date: "17-05-2016" },
      { id: 3, number: "FOYER-03", productType: "Plaster Sand", quantity: "4500", date: "19-05-2016" },
      { id: 4, number: "FOYER-04", productType: "Plaster Sand", quantity: "1500", date: "25-05-2016" },
      { id: 5, number: "FOYER-05", productType: "Plaster Sand", quantity: "500", date: "23-05-2016" },
      { id: 6, number: "FOYER-06", productType: "Crushed Stones", quantity: "1000", date: "24-05-2016" },
    ];
  }
  showOrderDetails(order) {
    this.nav.push(OrderDetailsPage, { order: order });
  }
}

Below is the result

image

1 Like

Looking at the result it’s obviously not supported - this is usually a hint to rethink your design or to consider implementing a custom component.

Hello,
Can you plz try this code snippent, for me its working fine…
I was able resolved this issue placing outside of tag.
<ion-navbar primary *navbar>



Orders




ORDER






order.number







order.quantity


  <ion-item>
    <ion-row>
      <ion-col>
        <ion-icon name="pie" item-left></ion-icon>
        order.productType
      </ion-col>
    </ion-row>
  </ion-item>
  <ion-item>
    <ion-row>
      <ion-col>
        <ion-icon name="calendar"></ion-icon>
        order.date
      </ion-col>
    </ion-row>
  </ion-item>
</ion-grid>

This is actually no hint, it’s just an example that doesn’t work.
Any grid layout works that way, you can implement them wherever you wish, since grids are meant to be flexible. Not the case with ion-grid, ion-row, ion-col, and so it goes.

I’d imagine it’s less the case of the grid being inflexible (as it’s just using flexbox), and more of the fact that ion-item expects a particular format.

Yeah, I understand!
Actually I also thought that to be the case, until I tried to use an ion-row > ion-col inside a already existing ion-col and it didn’t work. That may be the way that the Ionic grid is designed to work, but if you compare it with any other CSS solutions, it seems pretty unflexible to me.

Well, as you know ion-grid exist because Ionic is based upon Bootstrap and Material from Google. Nesting is not super well documented on the template view. My experience is in general (just personal experience), you can nest everything with ion-item, then ion-list, then ion-grid. If you try to grid outside of the correct nesting (aka outside of this order) it will probably fail :frowning:

That being said, ion-card is handy too, because it presents whatever data without the need of complex front-end nesting, and accomodates with any pair. And looks very nice inside loops, whatever device.

In the topic example, @vijquick should try a different structure: <ion-item><ion-list><ion-grid> then row and cols…

But as the goal of a framework like Ionic is to prevent 2/3 cols on smartphone, it will only be used by… desktop computers … eventually tablets … without large hacks on the app CSS/SCSS.

Hope it helps,

2 Likes

I know this is a super old topic, but @FrancoisIonic you just helped me resolve an issue migrating from ionic 3 where I came across this same problem. I had ion-item > ion-row > ion-col that worked in my 3 year old app but failed when I upgraded. Changing to ion-item > ion-list > ion-row > ion-col solved my issue. Thanks!