Last card in list missing padding & drop shadow

[WhatsThatItsPat]

Ionic version: (check one with "x") [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report

Current behavior: When a list of cards is followed by a list with a header, the last card in the preceding list loses its bottom padding and drop shadow. The issue is in MD, iOS looks fine.

Expected behavior: Still has padding and drop shadow.

Steps to reproduce: http://plnkr.co/edit/SKkCoSkvlqrDIBJkU9OP?p=preview

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : ios 4.3.1
    Ionic Framework                 : ionic-angular 3.5.0-201706292025

System:

    Node       : v6.9.4
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 4.6.1

[jgw96]

Hello, thanks for using Ionic! The issue here was that you had multiple ion-list's on the page when you really only needed one ion-list wrapping all of the items. You can see an example of this working in this plunker that i made.

[WhatsThatItsPat]

Thanks for the response @jgw96, but I think this needs another look. A few things:

First, while your solution seems to work when considering cards, it falls apart when you use items. See this. When you have "mini-lists" of items that don't have their own parent ion-list tag, you get an issue of a double-border between last-items and headers (I assume because CSS can't tell that the item is the last of a list). Devs shouldn't have to remember different implementations of ion-list that are dependent on whether they are using items or cards.

Second, when you cram everything into one list, you lose the ability to easily customize and manipulate a "mini-list." You can't add a class (<ion-list class="whatever">) and would have to resort to styling individual items. Also, you no longer have a node on which to throw a directive (*ngIf, *ngFor, [ngSwitch], etc.) and would have to resort to a more difficult implementation of ng-container.

Last, as a general theory, it seems to me a list should have one header only. This seems to be backed up by your documentation.

<ion-header>
  <ion-navbar>
    <ion-title>List Headers</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-list-header>Comedy</ion-list-header>
    <ion-item>Airplane!</ion-item>
    <ion-item>Caddyshack</ion-item>
    <ion-item>Coming To America</ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header>Action</ion-list-header>
    <ion-item>Terminator II</ion-item>
    <ion-item>The Empire Strikes Back</ion-item>
    <ion-item>Blade Runner</ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header>Horror</ion-list-header>
    <ion-item>The Evil Dead</ion-item>
    <ion-item>Poldergeist</ion-item>
    <ion-item>Aliens</ion-item>
  </ion-list>

</ion-content>

[WhatsThatItsPat]

@kensodemann Can we get another set of eyeballs on this? Here's a simplified Stackblitz.

If I'm wrong, then the docs should be updated and shouldn't recommend multiple lists with headers in each.

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