Extra padding when ion-card inside ion-content with padding

[e9li]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
After updating to 3.0 there is an extra padding when using ion-card inside a <ion-content>.
Removing the padding corrects the padding left an right but top and bottom has no padding anymore.
Happens on all iOS Devices and iSimulator with iOS 10.3 and on Android emulator with Android 7.1.1

Expected behavior:
Shoud look like before in 2.3

Steps to reproduce:
Put an ion-card in a ion-content with padding

Related code:

<ion-content padding>
    <ion-card>
    </ion-card>
</ion-content>

Other information:
I could fix this problem by removing the padding on ion-content and adding some scss to app.scss

<ion-content>
<ion-card>
</ion-card>
</ion-content>

ion-content.content {
  .scroll-content {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.6.0
Xcode version: Xcode 8.3 Build version 8E162

[brandyscarney]

Thanks for the issue! I'm not able to see any differences in padding with a card in the content. It looks like you have a lot of custom CSS, could this be causing it? Here is what I see when placing a single card in the conference app:

Could you provide a minimal repository that reproduces it, or see if you can reproduce it in the conference app? https://github.com/driftyco/ionic-conference-app

Thanks 🙂

[anveo]

I observed this as well, appears to be fixed with ionic-angular@3.0.1.

[brandyscarney]

@anveo That may be why I couldn't reproduce it in my testing. Thanks for the info. :)

[e9li]

@brandyscarney I didn't use a lot custom CSS, it's out of the box like that, even with a fresh project.

[e9li]

ionic-angular@3.0.1 solves the problem

[rohit-pathak]

I'm seeing this issue with Ionic 3.12.0 ("ionic-angular": "3.7.1"). I have ion-card with a list (from the documentation) inside ion-content.

[groupsvkg]

Ionic 3.19.0("ionic-angular": "3.9.2"). I am not able to remove spaces to the right of ion-card inside ion-content.

[brandyscarney]

@groupsvkg The card takes up 100% width minus the margin. If you want it to have no margin and take up the full width you will need to set width: 100%.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.