Adding margin to a button in a list

Ionic Framework ionic-v3
1

Hello all.

I’m trying to make a demo shopping app in order to learn Ionic2. I have a list with a thumbnail, the product’s name and price, and an ADD button to add the product to the cart.

My problem is that the price and button are exactly next to each other and I would like there to be some space between them. Here is my list code:

<ion-content>
    <ion-list>
        <div *ngFor="let item of items; let i = index">
            <div ion-item>
                <ion-thumbnail item-left>
                    <img src="{{item.thumbnailURL}}">
                </ion-thumbnail>
                <h2>{{item.name}}</h2>
                <p item-right>{{item.price}}</p>
                <button item-right (click)="addItemToCart(item)" id="addItemButton">Add</button>
                <button primary (click)="showDetails(i)">Details</button>
            </div>
        </div>
    </ion-list>
</ion-content>

And here is an image of what is displayed: http://imgur.com/OHzfniw (P.S. I know it’s a chair :smiley:)

I tried styling it and added this to an .scss file:

#addItemButton {
margin-left: 10px!important;
}

but even with !important the style was still not applied.

The only solution I found was adding a couple of &nbsp; after {{item.price}} but it is a pretty hacky solution.

I would welcome any recommendations and solutions. Thank you.

2

I figured it out. The .scss method worked, I just had to add

@import “…/pages/list/list”; //this is my .scss file

to app.core.scss

1 Like