Ion-item-sliding options are not showing in RTL direction

The following screenshot clearly shows the issue I am facing right now:

I am using ng2-translate for app translation. I managed to make the body of the application RTL by stating the direction (right or left) in the div padding tag.

<div padding dir="{{'LANG_DIR' | translate}}">
...
...
</div>

where LANG_DIR returns right or left depending on the language of the user.

The HTML for the sliding item:

<ion-list>
    <ion-item-sliding *ngFor="let event of evens">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="https://placehold.it/100x100">
        </ion-thumbnail>
          <h2>{{event?.name}}</h2>
          <p>{{event?.startDate | date}} - {{event?.endDate | date}}</p>
          <p>{{ 'FROM' | translate}} {{event?.startTime}} {{ 'TO' | translate}} {{event?.endTime}}</p>
      </ion-item>

      <ion-item-options side="right">
        <button ion-button color="primary" (click)="editEvent(event.id)">
          <ion-icon name="create"></ion-icon>
          Edit
        </button>
        <button ion-button color="secondary">
          <ion-icon name="stats"></ion-icon>
          Stats
        </button>
      </ion-item-options>

      <ion-item-options side="left">
        <button ion-button color="danger">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

<ion-item-options side="left" style="direction:ltr">

Adding the direction solved the issue.

2 Likes

but it should be “rtl”,

<ion-item-options side="left" style="direction:rtl">

1 Like

For ionic 5:
Fix it by setting with of ion-sliding-options as unset

ion-item-options:not(.item-options-start){
        width: unset !important;
 }