List cards with tabs is cut off at bottom ~20px

1

Where ever I have a bunch of list cards and tabs, even if i have “has-tabs” in they don’t sit well and the bottom most card is cut off by ~20px.

<ion-content class="has-header has-tabs">
  <div class="list card">
   ...
  </div>
  <div class="list card">
   ...
  </div>
  <div class="list card">
   ...
  </div>
</ion-content>
2

Yes, I noticed this error too, there is a “Go Hourse” way or check better on css style, but If you put one more “item” empty inside your card, maybe It will solve !!

3

That sorta works . . . Thanks.

Is this being fixed in the next beta?

4

Has there been any progress on this within ionic? Maybe it hasn’t made it to the docs yet? I also notice that the bottom is a bit cut-off for cards.

5

I get by with just 2 line breaks before the content tag

... <br/><br/></ion-content>

1 Like
6

Is there no fix yet? :frowning:

7

I imagine a “fix” will cause more problems now since everyone has gotten by this far with their own solutions, i.e. double line breaks or css margin/padding

8

This worked splendidly for me!

9

The vertical margin of .card class causes the problem.
I wrapped each card with .my-card-wrapper div and removed the margin of the card like this:

.my-card-wrapper {
  padding: 10px;
}
.my-card-wrapper .card {
  margin: 0;
}

<div class="my-card-wrapper">
  <div class="card">
    Your content here.
  </div>
</div>
<div class="my-card-wrapper">
  <div class="card">
    Your content here.
  </div>
</div>
<div class="my-card-wrapper">
  <div class="card">
    Your content here.
  </div>
</div>
11 
<ion-content>
  <ion-item>
    <ion-label class="list card">...</ion-label>
  </ion-item>
  <ion-item>
     <ion-label class="list card">...</ion-label>
  </ion-item>
</ion-content>