bug: Ion-item-sliding open anchor is too far from item-options

[Mazus]

Bug Report

Ionic version:

[x] 4.5.0

Current behavior:

When sliding the item-sliding, the slider stays open far from the options, when options layout is modified to grid (display:grid)

Expected behavior:

It used to work correctly with ionic 4.1 or something (don't remember the exact version). The slider should stop at the size of the items-option

Steps to reproduce:

Add display:grid to CSS for item-sliding

-->

.item-sliding-active-slide ion-item-options {
  display: grid;
}

Other information:

Seems like the open amount is exactly what it should be when display grid is not set:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (C:\Users\Pierre-Yves\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.2
   @angular/cli                  : 8.1.2
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.6.0
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\DEV\Tools\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[brandyscarney]

Thanks for the issue! Is there a reason you need to use display: grid? The reason this happens is because we are toggling the display property of the item options to flex before calculating the option width, and hiding it again.

If you're looking to stack the options on top of each other, you could change the flex-direction and the option width. Here's a Codepen example: https://codepen.io/brandyscarney/pen/dxMbJg

<ion-item-sliding id="stackedOptions">
  <ion-item>
    <ion-label>
      <h3>Sliding Item, Stacked Options</h3>
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </ion-label>
  </ion-item>
  <ion-item-options>
    <ion-item-option color="primary">
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-item-option>
    <ion-item-option color="secondary">
      <ion-icon slot="icon-only" name="archive"></ion-icon>
    </ion-item-option>
    <ion-item-option color="danger">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

#stackedOptions ion-item-options {
  flex-direction: column;
  width: 120px;
}

#stackedOptions ion-item-option {
  flex: 1;
}

[Mazus]

Thank you so much for this detailed answer. I assumed this was a bug because it used to work in previous versions, but it seems ionic just changed its way of calculating the open amount.

I had to change your code a bit :

.stackedOptions  {
  flex-direction: column;
  width: 60px;
align-items: flex-end
}

.stackedOption {
  flex: 1;
width : 60px;
}

The items took the full width of the item sliding and icons were behind the anchor.

Thanks again!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.