question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ion-item-sliding: options of the opposite direction of sliding is shown too

See original GitHub issue

Bug Report

Ionic version:

[x] 4.0.2

Current behavior:

adding an ion-item-sliding to an ion-item with ion-item-options both sides, when sliding the item from left to right (or vise versa) to the end of the item, the right icons shown up while it should not. so now both options from both sides will be shown in any swiping direction

Expected behavior:

when swiping from left to right or vise versa, only icons from the side i`m sliding should be shown

Steps to reproduce:

  1. create new project with version 4.0.2.

  2. in app.component.html add the sample example found in ionic documentation regards ion-item-sliding

  3. swipe from left to right or vise versa, issue will be generated.

Other information:

the issue was not presented in version 4 beta 7

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\sshalaby\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.2
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.2 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
masimplocommented, Apr 6, 2019

The issue is that the opposite item-options are not hidden so both are displayed. I just opened PR #17986 that remedies that by hiding the opposite sides item-options

  &.item-sliding-active-options-end .item-options-start,
  &.item-sliding-active-options-start .item-options-end {
    display: none;
  }

I initially had added the fix in item-sliding.scss but I think @brandyscarney suggestion of the item-options.scss file is much better.

1reaction
brandyscarneycommented, Apr 16, 2019

Merged in and fixed by https://github.com/ionic-team/ionic/commit/f13722cc206ce7f9661647c710fdc21e7c96eb72. This will be in the 4.3.0 release, thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-item-sliding: options of the opposite direction ...
Current behavior: adding an ion-item-sliding to an ion-item with ion-item-options both sides, when sliding the item from left to right (or vise ...
Read more >
ion-item-sliding
ion-item-sliding component contains items that are dragged to reveal buttons. Options are revealed when the sliding item is swiped from left to right....
Read more >
Ionic Item Sliding ngIf Issue - angular
I have an ion-list that displays trip details. For the trip's status, there is an ion-item-sliding element that allows the user to do...
Read more >
Create a Sliding Item Animation with a Directive in Ionic 2 & 3
In this tutorial, we are going to walk through how to create a directive to create an animation for a sliding item.
Read more >
Look up words in the thesaurus
If, for example, your document is in French and you want synonyms, do this: In Word 2007, click Research options in the Research...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found