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}}">

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

The HTML for the sliding item:

    <ion-item-sliding *ngFor="let event of evens">
        <ion-thumbnail item-left>
          <img src="">
          <p>{{event?.startDate | date}} - {{event?.endDate | date}}</p>
          <p>{{ 'FROM' | translate}} {{event?.startTime}} {{ 'TO' | translate}} {{event?.endTime}}</p>

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

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


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

Adding the direction solved the issue.


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

        width: unset !important;