Ionic list item

Ionic Framework ionic-v3
1

Why is my list of items now appearing as a column rather than a line?

Ionic Framework: 2.1.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.5
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Mobile Safari/537.36

image


<ion-content overflow-scroll="false">
  <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-avatar item-start>
          <ion-icon name="globe" class="globe"></ion-icon>
        </ion-avatar>
        <h2>Desenvolvimento 03</h2>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="primary">
          <ion-icon name="editar"></ion-icon>
          Editar
        </button>
        <button ion-button color="primary">
          <ion-icon name="excluir"></ion-icon>
          Excluir
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
2

I replicated your example and everything is good, but I think the error is caused by the globe class, can you paste the globe class code?

<ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-avatar item-start>
          <ion-icon name="globe" class="globe"></ion-icon>
        </ion-avatar>
        <h2>Desenvolvimento 03</h2>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="primary">
          <ion-icon name="editar"></ion-icon>
          Editar
        </button>
        <button ion-button color="primary">
          <ion-icon name="excluir"></ion-icon>
          Excluir
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
3

.globe{
font-size:50px;
}

4

Adding a second item to the list would also make it more obvious what exactly is happening.

5

image

6

Why are you using the avatar option, when you can use the icon directly?

Chris

<ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-icon name="globe" item-start></ion-icon>
        <h2>Desenvolvimento 03</h2>
        <p>sdfsdf</p>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="primary">
          <ion-icon name="editar"></ion-icon>
          Editar
        </button>
        <button ion-button color="primary">
          <ion-icon name="excluir"></ion-icon>
          Excluir
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
7

Nothing solved, sorry ;(

8

Solved:

<ion-list>
  <ion-item-sliding #item>
    <ion-item>
      <ion-icon name="globe" class="globe"></ion-icon>
      Desenvolvimento 3
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
1 Like