CODEWITHSUNDEEP
cssionic-framework
kankamuso
kankamuso

Reputation: 441

How to remove "padding" from ionic card

I am trying to insert inamges inside ionic cards. I preferred to use cards because I want to keep aspect homogeneous. The problem is that, as you can see on the next image, there is a white space at the bottom (more evident here, but also present at top and sides) of the card after an image:

You can see the bottom padding-like space

I have tried using CSS but no luck. In part it is probably because I don't know which CSS is involved. Also, I don't really know how to remove such white space.. I even tried using negative padding values but it does not work so I suppose it is not really the card component but a subpart which is doing the issue.

This is my current code: 

<div class="card" ng-controller="cycleImagesCtrl">
    <div class="item item-body" style="padding: 0px 0px 0px 0px;">
        <img src={{imgTitle}} width="100%" />
    </div>
</div>

Any hints?

Upvotes: 7

Views: 17865

Answers (5)

MVDeveloper1
MVDeveloper1

Reputation: 208

Finally I found out the solution. I am using Ionic 5.

ion-card { font-size: 0; }

Upvotes: 0

k33da_the_bug
k33da_the_bug

Reputation: 820

In Ionic v5, Following worked for me, I used <ion-img> tag to render images and I set class="no-padding card-background-page" to <ion-content> tag.

Code: 

<ion-content class="no-padding card-background-page">
    <ion-card>
        <ion-img src="assets/img/yourimg.jpg"></ion-img>
    </ion-card>
</ion-content>

Upvotes: 0

Mattias
Mattias

Reputation: 840

Try the 'no-padding' attribute, https://ionicframework.com/docs/layout/css-utilities Or the new (since the attribute is deprecated) 'class="no-padding'

<ion-card class='no-padding'>
  <ion-card-header class='no-padding'>
    <img src='...' />
  </ion-card-header>
  <ion-card-content class='no-padding'>
    Some content
  </ion-card-content>
</ion-card>

Upvotes: 0

arshcaptano
arshcaptano

Reputation: 59

Add margin: 0 !important; and padding: 0 !important; for your card's css. Like this:

ion-card {
width:100%;
height:300px;
margin: 0 !important;
padding: 0 !important;
}

ion-card > img {
 width: 100%;
height: 100%;
}

<ion-card>
<img src="...">
</ion-card>

Upvotes: 5

frnt
frnt

Reputation: 8795

See 1st you should never assign negative values to padding as it won't work. If you need to work with negative values then use margin,

2nd try adding width and height of 100% to your img.

Just for example -

#parent{
  width:500px;
  height:300px;
}

#parent > img{
  width:100%;
  height:100%;
}
<div id="parent">
<img src="https://source.unsplash.com/random">
</div>

Upvotes: 2

Related Questions