Skip to content
Permalink
Browse files

fix(card): remove white space from bottom of card (#18328)

When using a card with the button attribute the `<button>` element is
set to display: inline-block in chrome. This causes an undesirable line
of white space at the bottom of the card. This is most noticeable when
using an image inside the card where the bottom of the `<img>` tag won't
reach the bottom of the card.

Setting the button to have `display: block` ignores this white space
allowing the content to reach the end of the card.
  • Loading branch information...
studioromeo authored and liamdebeasi committed May 29, 2019
1 parent 11cde99 commit d53e7aa51ca2cfa7cf61be1afec25bc89c38a19c
Showing with 7 additions and 1 deletion.
  1. +3 −1 core/src/components/card/card.scss
  2. +4 −0 core/src/components/card/test/button/index.html
@@ -70,6 +70,8 @@
@include padding(0);
@include margin(0);

display: block;

width: 100%;
min-height: var(--min-height);

@@ -100,4 +102,4 @@ button, a {

ion-ripple-effect {
color: var(--ripple-color);
}
}
@@ -68,6 +68,10 @@
</ion-card-content>
</ion-card>

<ion-card button>
<img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
</ion-card>

</ion-content>

</ion-app>

0 comments on commit d53e7aa

Please sign in to comment.
You can’t perform that action at this time.