Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SherifMoShalaby opened this issue Mar 19, 2019 · 7 comments

Comments

4 participants
@SherifMoShalaby
Copy link

commented Mar 19, 2019

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

@ionitron-bot ionitron-bot bot added the triage label Mar 19, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Mar 20, 2019

Hi there,

Thanks for the issue. Is this the behavior you are describing?

zf3gqstXst

@ionitron-bot ionitron-bot bot removed the triage label Mar 20, 2019

@SherifMoShalaby

This comment has been minimized.

Copy link
Author

commented Mar 20, 2019

Hi there,

Thanks for the issue. Is this the behavior you are describing?

zf3gqstXst

Yes.

@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 2, 2019

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 2, 2019

The issue is most likely somewhere in this:

.item-sliding-active-slide {
  @include rtl() {
    &.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
      width: 100%;

      visibility: visible;
    }
  }

  ion-item-options {
    display: flex;
  }

  &.item-sliding-active-options-start .item-options-start,
  &.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
    width: 100%;

    visibility: visible;
  }
}

https://github.com/ionic-team/ionic/blob/master/core/src/components/item-options/item-options.scss#L69-L88

@masimplo

This comment has been minimized.

Copy link
Contributor

commented 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.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

Merged in and fixed by f13722c. This will be in the 4.3.0 release, thank you!

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Apr 16, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core Apr 16, 2019

@brandyscarney brandyscarney moved this from Needs review 🤔 to Done 🎉 in Ionic Core Apr 16, 2019

@ionitron-bot

This comment has been minimized.

Copy link

commented May 16, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.