Ionic Angular - Sliding Option Text Hidden

Issue

I have the following that generates a list of ion-item-sliding elements where the label is some text and then the buttons (will eventually) allow the user to edit/delete the current item:

<ion-list *ngIf="examples | async; else loading">
  <ion-item-sliding *ngFor="let example of examples | async">
    <ion-item>
      <ion-label>{{example.ExampleName}}</ion-label>
    </ion-item>
    
    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

The issue is that if one of the items has very little text in the label, then the entire label is hidden (see image).

Is there a way to make it so that the text gets hidden from right-to-left instead of from left-to-right? For example, using the screenshot above, the topmost entry would say "This is an example with a lot" and then "of text" would be cut off.

Solution

I tried a little workaround with the event (ionDrag) and getOpenAmount to apply the margin base on the slide. That need a little more work on the reset but it does the trick to avoid the label disappearing.

See the methods here : https://ionicframework.com/docs/v6/api/item-sliding#methods

HTML

 <ion-list>
  <ion-item-sliding (ionDrag)="testMargin($event)" slot="end">
    <ion-item>
      <ion-label id="testId">This label</ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      <ion-label>That label</ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS

  testMargin(ev: any) {

    ev.target.getOpenAmount().then((el) => document.getElementById('testId').style.marginLeft = el + 'px');

  }

Answered By - uKioops