scroll content not sized properly for "list cards"

[calendee]

If content section of view contains cards with the "list" class, the scroll area does not size properly to accommodate them.

CodePen Sample : http://codepen.io/calendee/pen/tBnlJ

You can see in the sample that the card is partially cutoff and the viewport cannot be scrolled all the way do to see it.

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios7-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address 2
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios7-telephone"></i>
    Enter phone number 2
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password 2
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information 2
  </a>

</div>

[perrygovier]

Hey @calendee, I can reproduce it, thanks.

It looks like it only happens when I use the class list and card together. Trying to determined if it's a JS or CSS problem at this point. Stay tuned.

Update: it's CSS, fixing

[perrygovier]

Actually, it looks like this is already fixed. Are you seeing this in the nightly?

[calendee]

Thanks for the quick response.

All good in the nightly : http://codepen.io/calendee/pen/tBnlJ

However, it would be nice if a card had just a slight bit of padding at the bottom by default so it wouldn't sit on the extreme edge of the view. Of course, it's not hard to do on my own but might be best if done be Ionic.

Feel free to close if you don't think that little bit is worth keep open for.

[thenovelnomad]

This is still an issue if the view has a sub-header, and the sub-header is currently hidden.
Check it out here and toggle the sub-header by clicking the button:
http://codepen.io/thenovelnomad/pen/vwbmx

[perrygovier]

Hey @thenovelnomad, in this case, you'd want to use the has-header class.
http://codepen.io/perrygovier/pen/jLJAg

Hey @calendee, I added a little extra margin-bottom to the last .list.card on a page

Looks like this one is fixed.

[pulkitsinghal]

@perrygovier - Is this the solution for http://forum.ionicframework.com/t/list-cards-with-tabs-is-cut-off-at-bottom-20px ?

[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.