Swipe and swipe back ion-item-sliding with gesture and with button

Hello. I’m using ion-item-sliding and ion-item-option button for my ion-list.
With the slide gesture all works great.
But, I also need to open/close the hidden part with a button.

The open part was easy, but - for some reason, after slide, the button not trigger the clic event anymore. I think the ion-item is “locked” by the framework after the swipe.
Anyone has a workaround?

What happens is that the ion-item-options takes the entire width of the ion-item-sliding when it is opened and the mouse events are disabled for the ion-item inside de sliding.

There is a workaround:


ion-item-sliding {
  ion-item {
    // 're-enable' user interaction
    pointer-events: all;

  ion-item-options {
    // so it doesn't take the entire width
    width: fit-content !important;

The following you probably already figured out, but I’ll put here in case someone is trying the same thing in the future.


toggleSliding(itemSliding: IonItemSliding) {
  itemSliding.getSlidingRatio().then((ratio: number) => {
    ratio >= 1 ? itemSliding.close() : itemSliding.open(undefined);

Check the docs to understand the ratio


<ion-item-sliding #itemSliding>
    <ion-label>Sliding Item with End Options</ion-label>
    <ion-button (click)="toggleSliding(itemSliding)" fill="clear">
      <ion-icon name="options-outline"></ion-icon>

    <ion-item-option color="danger">Delete</ion-item-option>

Hi, thank you very much!!!

This worked for me:

ion-item-sliding {
ion-item::part(native) {
// ‘re-enable’ user interaction
pointer-events: all;

ion-item-options::part(native) {
// so it doesn’t take the entire width
width: fit-content !important;

Thank you again!!!

1 Like