[SOLVED] Padding or Margin in ion-grid

Ionic Framework ionic-v3
1

Hi :slight_smile:

How Can I removo the space designate by the red arrow in the picture, I try to remove padding and margin but that doesn’t work as expected…

image
Image1.png658Ă—786 371 KB

2

Show me your code first.

3 
   <ion-grid>
      <ion-row justify-content-center>
        <ion-col class='cardRestaurant' *ngFor="let restaurant of restaurants" col-6>
          <ion-card (tap)='showDiner(restaurant)'>
            <img [src]="'assets/images/'+ restaurant.imagee"  class="imgCardMain" />
            <ion-card-content>
              <ion-card-title>
                <span class="textCardRestaurant">{{ restaurant.title }}</span>
                <span class="sousTextCardRestaurant"><br>{{ restaurant.type }}</span>
                <span class="sousTextCardRestaurant">Prix = {{ restaurant.prix }}€</span>
                <span class="textCardRestaurant"><br>{{ restaurant.avis }}</span><span class="note">/10</span>
                <img src="assets/images/trip.png" class="imgTrip">
                <span class="reduction"><br>{{ restaurant.reduction }}% sur la carte</span>
              </ion-card-title>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>

Thanks for your help :slight_smile:

4

do you have padding in <ion-content> ?

5 
<ion-content id="mainPage" (ionScroll)="hiddenElement($event)">

No…

6

so you need to override style in file scss if you want to remove padding

7

it because the grid has it own padding , and card has it own padding too

8

On witch element ?

Because I try on ion-card, row, grid, column so I don’t know where remove the padding ?

9

try copy this in to file scss

ion-grid{
        ion-card{
            width:100%;
            margin-left:0 !important;
            margin-right:0 !important;
            ion-card-content{
                padding: 0 !important; 
            }
        }
    }
10

image
Image1.png595Ă—1067 508 KB

That doesn’t work but I don’t understand why, it’s like ion-grid reduce my element…

11

You can remove my code and try to inspect element on your project to see the real problem.

12

My playground similar to you

image
Screen Shot 2017-07-27 at 4.20.31 PM.png1162Ă—670 376 KB

13

Yes, I want the same result as you :frowning:

When I inspect, I found just a little margin with ion-col but nothing to explain this blank…

14

Try this then


ion-row{
        ion-card{
            width:100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        img{
            width:100%;
        }
    }
   }
4 Likes
15

image
Image2.jpg733Ă—912 161 KB

I have loose the intern margin but the problem is not solved :frowning:

16

Try to add attr no-padding in ion-content then overwrite the ion-card set margin:0 and width:100%

Result:

image
testing.png438Ă—707 311 KB

17

Thanks for your answer :slight_smile:

I obtain this result

image

I have no margin/padding intern…

18

@Chungtheng

Yout method is perfect, I have forgot to delete a css property in variable.scss sorry…

1 Like
19

This means you do have padding on the content, to remove it you’ve to explicitly use the no-padding attribute. Like this:

<ion-content no-padding>