How to stretch card to fill the entire content?

1

I’ve just started using ionic, and I’ve noticed that cards are very nicely designed. I was just wondering though how I’d go about making sure that the height of cards always match that of the content height.

<div class="card" style="height:100%">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>

I’ve tried taking the html from the css overview and placing height:100% on the card div (like above), but that doesn’t seem to stretch the card to the height of the content.

Any ideas?

2

Hi @dk123

Did you end up finding an answer to this?
I agree that cards are very well designed. They are a nice way to encapsulate everything inside it.
I just need the card to stretch so that it fills the entire content height.

Thanks
Richard

2 Likes
3

@rtomaselli I sadly wasn’t able to find an answer to this - and at the time I recall I was told by the Ionic team that this was a common disadvantage of html in general and had my issue closed.

If you happen to open an issue about this on github, if you post the link here, I’m more than willing to +1 it to try and get this more interest. This feature would definitely be a great addition.

4

Maybe I’m misreading the request, but if you want the content area to look like a card, how about this?

<ion-content class="card">

</ion-content>
5

What’s wanted is making the card fill up (stretch/match) the entire content area
(the exact whole space below the title).

Your code just creates a card that’s height and width are of only the content within it.

6

Here’s a codepen showing full content-area card:

1 Like
7

@mbuster Thanks for the codepen - my answer was a bit vague.

The question is about getting the item inside the card to fill the whole content:

<div class="card" style="height:100%">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>
8

Thanks everyone for chiming in.
I’ve had to achieve what I wanted to do another way, which unfortunately does not use the card class at all.

It’s a real pity because the card class lays everything inside it quite nicely.

@dk123: as soon as I find time I’ll submit a functionality request.

cheers.

9

@rtomaselli Hi, I’ve gone about creating the github issue myself:

It would be nice if you could perhaps +1 it to gain some interest by the ionic team.

10

Thanks @dk123. I’ve added a +1 along with my take on it.
cheers

1 Like
11

put this in your stylesheet
ion-card {
margin-left: -16px;
margin-right: -16px;
}

you can simply alter the values to fit your screen.

12

you have to define ionic tags like as


do your code here

13

I managed to stretch the card to the screen’s full length by the following css

ion-card {
height: 100%;
margin: 15px;
}