Item-sliding: icon on top or on the left side

Ionic Framework ionic-v3
1

Hi,

In the Ionic documentation here, when you try the item sliding, the icon is on top of the label.

My code generates an icon on the left of the label like this:

image

  <ion-item-options>
    <button danger (click)="delete(slidingItem)">
      <ion-icon name="trash"></ion-icon>
      {{ 'DELETE' | translate }}
    </button>
    
    <button danger (click)="stop(slidingItem)">
      <ion-icon name="hand"></ion-icon>
      {{ 'STOP' | translate }}
    </button>    
  </ion-item-options>

This is done with beta 7.

I also noticed, in Chrome and with iPhone5 simulator, the second button is cut a bit. Normal?

2

If you look at the demo

https://github.com/driftyco/ionic/blob/2.0/demos/item-sliding/main.html#L172

We’re actually change the styles for those.
By default, the flex-direction is row, it’s just changed for the demo.

3

Hi @mhartington,

Thanks for the hint

By the way, do you know what the second button got cut when using the default flex-direction?

4

Hi again,

I definitively don’t get the same result as your example. I have no left and right padding of my button. Any clue?

image

5

Same thing, there’s custom styles going on to make things look a bit better.

Please check the link I sent you.

6

@mhartington,

Beside the below, what else that I don’t see?

  .chat-sliding-demo ion-item-options .button-inner {
    font-size: 14px;
    flex-direction: column;
  }
  .chat-sliding-demo ion-item-options ion-icon {
    padding-right: 0;
    padding-bottom: 0.3em;
  }
7

Finally, I added this

ion-item-options .button {
  padding-right: 10px;
  padding-left: 10px;
}

It is like I want

In summary

.chat-sliding-demo ion-item-options .button-inner {
  font-size: 14px;
  flex-direction: column;
}

.chat-sliding-demo ion-item-options .button {
  padding-right: 10px;
  padding-left: 10px;
}

.chat-sliding-demo ion-item-options ion-icon {
  margin-bottom: 5px;
}

Thanks again

8

Actually, the icons should be on the top by default. This is definitely a bug caused by the pipe. Adding it is causing the wrong classes to be added to the button, so it doesn’t think the text is there. Could you create an issue on GitHub, please? Thanks! https://github.com/driftyco/ionic/issues