Ionic Thumbnail List render incorrectly

Ionic Framework ionic-v3
#1

I use ionic thumbnail list like the document said:

 <ion-list>

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

  </ion-list>

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

image

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

image
image.png977×577 72.2 KB

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?

#2

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>
#3

Because you are using an old version of ionic-angular:

1 Like
#4

I check my package.json, my ionic-angular was fixed by 3.0.1.
Is the official package upgrade?

I don’t remember i change the version of this.

#5

You can always see the release history here. The left/right -> start/end change went in in 3.2.0.