0

I am not new to Ionic, but unfortunately I couldn't figure out why this is happening.

I am trying to create a simple list of cards on a newly created project, but they don't seem to work. I tried using both the icons and the cards separately and that didn't seem to work either.

As I said, I have created a brand new project, having the standard "home-about-etc" template, and have replaced the HTML inside the home.html file with a div with cards inside. Here is the code:

 <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="card">
    <div class="item item-divider">
      I'm a Header in a Card!
    </div>
    <div class="item item-text-wrap">
      This is a basic Card with some text.
    </div>
    <div class="item item-divider">
      I'm a Footer in a Card!
     </div>
   </div>
 </ion-content>

Is this a common issue that is currently being under investigation, because I really don't see how I might have done anything wrong, since I have only just created this brand new project and have copy-pasted the template for cards straight from the v2 website?

EDIT:

Code of the Home.ts class:

 import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

Many thanks!

user3153278
  • 297
  • 2
  • 4
  • 20
  • In your `index.html` do you still have `` entry point? What does the code for the Component for the home page look like? – Alexander Staroselsky Feb 03 '17 at 20:38
  • @AlexanderStaroselsky I still have it, yes. As I said, I haven't changed anything but the html code displaying the 'Hello to Ionic2' text with the code shown above. I have edited my post with the code inside the Component for the home page class above. – user3153278 Feb 03 '17 at 20:43
  • Try removing the `...` section from this template and see if anything renders. Perhaps the ` needs additional configuration and may be preventing rendering. – Alexander Staroselsky Feb 03 '17 at 20:53
  • Also try removing the attribute `padding`, just for the sake of testing what is causing this. – Alexander Staroselsky Feb 03 '17 at 20:56
  • @AlexanderStaroselsky removed the and padding but the cards are still not there :/ – user3153278 Feb 03 '17 at 20:57

1 Answers1

0

try using it as this:

<ion-card>
  <ion-card-content>
  </ion-card-content>
</ion-card>
HMansour
  • 71
  • 3
  • 7