CSS columns break ion-card


I’ve just found that the ion-card component may not remain whole when using a simple multi-column layout.

In some cases, the background image is torn out of the card. In worse cases, the bottom shadow of the last card of column i will show up orphaned at the very top of column i+1.

To easily see the issue in Chrome, right-click > Inspect. Click the “toggle device toolbar” icon, and drag the screen to resize. Based on your width & height, you’ll experience different ion-card issues.

Any help is appreciated!!



import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

    selector: 'page-page1',
    templateUrl: 'page1.html'

export class Page1 {

    public _robots: any[];

    constructor(public navCtrl: NavController) {
        this._robots = [
            { name: 'Bender', imgPath: 'https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png' },
            { name: 'Calculon', imgPath: 'http://vignette3.wikia.nocookie.net/en.futurama/images/b/b3/Calculon-2.JPG/revision/latest?cb=20090604015557' },
            { name: 'Clamps', imgPath: 'http://i.imgur.com/rdIwEF9.gif' },
            { name: 'Crushinator', imgPath: 'http://www.netbrawl.com/uploads/1d851a1aa94ef0b997da28d6ad970885.jpg' },
            { name: 'Donbot', imgPath: 'http://vignette2.wikia.nocookie.net/en.futurama/images/1/13/Donbot.jpg/revision/latest?cb=20080112205318' },
            { name: 'Flexo', imgPath: 'http://vignette3.wikia.nocookie.net/en.futurama/images/8/83/Flexo.jpg/revision/latest?cb=20090605001726' },
            { name: 'Tinny Tim', imgPath: 'http://vignette2.wikia.nocookie.net/en.futurama/images/0/04/TinnyTim.png/revision/latest?cb=20130330073533' },

(derived from MHartington CSS Example)

page-page1 {

    h1 {text-align: center;}

    @media (max-width: 480px) {                                         // phone held vertically
        div { background-color: blue; }
        .botLayout { column-count: 1; }

    @media screen and (min-width: 481px) and (max-width: 768px) {       // phone held horizontally or tablet held vertically
        div { background-color: red; }
        .botLayout { column-count: 2; }

    @media screen and (min-width: 769px) and (max-width: 1024px) {      // tablet held horizontally
        div { background-color: green; }
        .botLayout { column-count: 2; }

    @media screen and (min-width: 1025px) {                             // large tablet, laptop, & desktop
        div { background-color: yellow; }
        .botLayout { column-count: 3; }


        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        <ion-title>Page One</ion-title>

<ion-content padding>
    <h1>Resize The Page Width...</h1>

    <div class="botLayout">
        <ion-card *ngFor="let robot of _robots">
            <img [src]=robot.imgPath />
                    {{ robot.name }}



So far, a partial solution has been to add the following to the SCSS file

ion-card {
        -webkit-column-break-inside: avoid;
           -moz-column-break-inside: avoid;
            -ms-column-break-inside: avoid;
                column-break-inside: avoid;
                  page-break-inside: avoid;
                       break-inside: avoid;

However, this doesn’t fix the ion-card’s shadow from showing up in the next column.

Still working towards a solution.