Ionic col error

badges why goes out of col-sm

Error Image

    <ion-item *ngFor="let _orderDetail of orderDetailArray">
        <ion-col col-sm-7>
          {{ }} &nbsp;Adet :{{ _orderDetail.quantity }}
          <ion-col *ngIf=">0">
            <ion-badge *ngFor="let _property of"
                       color="secondary"> {{ }}</ion-badge>
          <ion-badge *ngIf="_orderDetail.type" color="primary">{{ }}</ion-badge>
        <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 ion-button icon-only round outline color="info"
            <ion-icon name="md-add-circle"></ion-icon>
        <ion-col col-sm-2 text-right style="font-size: 20px; font-weight: bolder;">
          ₺{{ _orderDetail.product.salePrice * _orderDetail.quantity }}

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-col col-5>
        Content inside
    </ion-col col-5>
    <ion-col col-7>
       Content inside
    </ion-col col-7>

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

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