Ionic col error

ionic-v1
1

badges why goes out of col-sm

Error Image

<ion-list>
    <ion-item *ngFor="let _orderDetail of orderDetailArray">
      <ion-row>
        <ion-col col-sm-7>
          {{ _orderDetail.product.name }} &nbsp;Adet :{{ _orderDetail.quantity }}
          <ion-col *ngIf="_orderDetail.properties.length>0">
            <ion-badge *ngFor="let _property of _orderDetail.properties"
                       color="secondary"> {{ _property.name }}</ion-badge>
          </ion-col>
          <ion-badge *ngIf="_orderDetail.type" color="primary">{{ _orderDetail.type.name }}</ion-badge>
        </ion-col>
        <ion-col col-sm-3>
          <button ion-button icon-only round outline color="danger"
                  (click)="_orderDetail.quantity>1 ? _orderDetail.quantity=_orderDetail.quantity-1 : _orderDetail.quantity">
            <ion-icon name="md-remove-circle"></ion-icon>
          </button>
          <button ion-button icon-only round outline color="info"
                  (click)="_orderDetail.quantity=_orderDetail.quantity+1">
            <ion-icon name="md-add-circle"></ion-icon>
          </button>
        </ion-col>
        <ion-col col-sm-2 text-right style="font-size: 20px; font-weight: bolder;">
          ₺{{ _orderDetail.product.salePrice * _orderDetail.quantity }}
        </ion-col>
      </ion-row>
    </ion-item>
  </ion-list>
2

Ionic doesn’t use ‘sm’ … Bootstrap does. But yes, it has 12 columns per row like Bootstrap. I see where Ionic Team copied this from.

On ionic, you have to use col-7, col-5. There’s no specification for sm because screen is already mobile.

and you’re missing ‘Ion-grid’ tag… which is the top layer wrapper for ionic grid system.

It should look like:

<ion-grid>
  <ion-row>
    <ion-col col-5>
        Content inside
    </ion-col col-5>
    <ion-col col-7>
       Content inside
    </ion-col col-7>
  </ion-row>
</ion-grid>

Every time you want to use a grid system, it needs <ion-grid> top layer…<ion-row> goes inside, and then you can use several <ion-col col-4> or any col-number you want.

1 Like
3

thank you so much. this method worked.:grinning: