CODEWITHSUNDEEP
ionic-frameworkionic2
Jack Zhang
Jack Zhang

Reputation: 2796

Ionic Thumbnail List render incorrectly

I use ionic thumbnail list like the document said: ``` 

<ion-item>
  <ion-thumbnail item-start>
    <img src="assets/img/thumbnail-totoro.png">
  </ion-thumbnail>
  <h2>My Neighbor Totoro</h2>
  <p>Hayao Miyazaki • 1988</p>
  <button ion-button clear item-end>View</button>
</ion-item>

``` I copied same code to my project, when it didn't render correctly. My list view show like belwo:

And i checked the html ion-item and ion-thumbnail generate is

image|690x407

It doesn't like ionic example. the ion-thumbnail directive incorrectly wrapped by ion-label.

I don't know what happen, below is my ionic info

```

cli packages:

@ionic/cli-plugin-cordova       : 1.5.0 (/Applications/My-Project/sharemap/node_modules/@ionic/cli-plugin-cordova)
@ionic/cli-plugin-ionic-angular : 1.4.0 (/Applications/My-Project/sharemap/node_modules/@ionic/cli-plugin-ionic-angular)
@ionic/cli-utils                : 1.6.0 (/Applications/My-Project/sharemap/node_modules/@ionic/cli-utils)
ionic (Ionic CLI)               : 3.6.0 (/Applications/My-Project/sharemap/node_modules/ionic)

global packages:

Cordova CLI : 6.4.0

local packages:

@ionic/app-scripts : 1.3.0
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.0.1

System:

Android SDK Tools : 26.0.2
Node              : v6.10.1
OS                : macOS Sierra
Xcode             : Xcode 8.3 Build version 8E162
ios-deploy        : 1.8.1
ios-sim           : 5.0.6
npm               : 3.10.3

```

What's wrong with my code?

Upvotes: 0

Views: 718

Answers (1)

Jack Zhang
Jack Zhang

Reputation: 2796

i found the solution: I change the item-start directive to item-left, then problem solved.

i don't why this directive not work like Ionic Document said.

And I also found that item-end not work like document either. You need to change to item-right.

The right code is below:

<ion-item>
  <ion-thumbnail item-left>
    <img src="assets/img/thumbnail-totoro.png">
  </ion-thumbnail>
  <h2>My Neighbor Totoro</h2>
  <p>Hayao Miyazaki • 1988</p>
  <button ion-button clear item-end>View</button>
</ion-item>

Upvotes: 0

Related Questions