List members wanted side-by-side but laying out vertically

Ionic Framework ionic-v3
1

I am trying to make my lists look like the list examples in the v2 documentation. Seems like I am doing exactly as they recommend:

<ion-list>
    <ion-item *ngFor="let product of products">
      <ion-thumbnail item-start>
        <img src="../assets/{{product.img}}">
      </ion-thumbnail>
      <h2>{{ product.title }}</h2>
    </ion-item>
  </ion-list>

But my list is coming out with the list components stacked instead of side-by-side.

41 PM
Screen Shot 2017-08-09 at 2.52.41 PM.png610×1072 59.4 KB
. See screenshot. I want the text to be adjacent the thumbnails, not below.

2

Any chance you have some unusual custom CSS that is causing unintended consequences here?

3

I don’t think so. I’ve only added one custom css snippet, and that’s for a different page, and rstricted to that page. It just defines a background image for another page.

4

I ask because I used basically your code:

fruits = ['apple', 'banana', 'cherry'];
<ion-list>
  <ion-item *ngFor="let fruit of fruits">
   <ion-thumbnail item-start>
    <img src="foo">
   </ion-thumbnail>
   <h2>{{fruit}}</h2>
  </ion-item>
</ion-list>

Naturally the images are broken, but the placement of the labels is to the right of the broken image, not underneath. I even put a massive lorem ipsum as a fourth fruit to see if it was because some of your labels are too long to fit, but it didn’t change things.

5

Yeah, that’s why I shortened the first one in the list.

Seems bizarre to me too. I’m very proficient in Ionic 1 and just starting in on Ionic 2. I was just beginning to feel comfortable, and then I hit this weirdness. I guess hitting weirdness when you’re coding is inevitable.

6

If I use rapropos code, as is, I get the same behavior I originally got with the image on one line, and the descriptor on the next line. I don’t see that I have any custom css in any of the scss files. I see this on multiple page views, the behavior is consistent in that it is always stacked vertically, rather than laid out horizontally.

Any other ideas for what might be causing this? At this point, it feels like I’m looking for a needle in a haystack.

7

I see the exact same behavior if I use avatars or icons instead of thumbnails. This one is driving me nutzoid!