search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.92k stars 13.51k forks source link

Slides Component within Slides Component works in 2.0.0.rc4, but not in 2.0.0 Final #10542

Closed nebrekab closed 5 years ago

nebrekab commented 7 years ago

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: The Slides component in Ionic 2.0.0 Final (and 2.0.1) does not allow for Slides to have inner Slides components; e.g. a horizontal Slides with inner vertical Slides. This can be achieved in 2.0.0-rc.4 - see: http://plnkr.co/edit/vBSifSBHzjDp4hkFG7VR?p=preview

@brandyscarney you asked me to post this here, see https://forum.ionicframework.com/t/ionic-2-final-and-slides-component-within-a-slides-component/77503/3

Expected behavior: That you can setup a Slides component that can be swiped horizontally and it's inner Slide component content can be slid vertically.

Steps to reproduce: See 2.0.0.rc4 example Plunker: http://plnkr.co/edit/vBSifSBHzjDp4hkFG7VR?p=preview

This works as expected (Note: some CSS is required in index.html to make the vertical Slides component Y value passed into translate3d() to honour the height of the individual Slide tags).

In Ionic 2.0.0 Final (and 2.0.1), it only slides horizontally (the outer Slides component's behaviour), the inner Slide vertical functionality is ignored.

Related code: See Plunker: http://plnkr.co/edit/vBSifSBHzjDp4hkFG7VR?p=preview

Other information: Forum link: https://forum.ionicframework.com/t/ionic-2-final-and-slides-component-within-a-slides-component/77503/3

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002
jgw96 commented 7 years ago

Thanks for opening an issue with us, we will look into this.

liuxh0 commented 7 years ago

I also encountered this problem.

darron1217 commented 7 years ago

I also encountered this problem... For me, this is a big issue. Any workaround?

liuxh0 commented 7 years ago

Instead of using ion-slides, I am using Swiper (http://idangero.us/swiper/api/), on which ion-slides is based. By the way I don't understand why my last comment was marked thumb down...

nebrekab commented 7 years ago

Hey @liuxinhu, And did swiper fix the issue in newer versions of ionic?

liuxh0 commented 7 years ago

Hey @nebrekab, I am using ionic 2.1.0 and swiper 3.4.1. It works fine until now. The only problem I've met is coverflow, but I found workaround.

gitmyhub commented 7 years ago

Any update on when this will be fixed?? I am using ionic 3.7.0

DennisSmolek commented 6 years ago

Hey @gitmyhub I've had the same problem and spent some time this morning working out what's going on. I saw your issue #10192 but figured this one had a bit more activity on it.

The key issue is that the version of Swiper used in Ionic is VERY DIFFERENT than swiper itself.

If you look at the code for the initEvents() function in Swiper.js and compare it to the version in Ionic swiper-events you can see that to get things going with Angular/Typescript/Cordova/Ionic whatever they added a whole bunch of stuff.

Swiper uses a nice little catch which then passes to the addEventsListener function with the useCapture parameter.

If you look at the Ionic Version They added a TONNNN of complexity so I dont know how easy it will be to emulate/do, I'm going to play with it for a bit though...

devs-addiction commented 6 years ago

We also have encountered this problem. +1

SoSayethSimon commented 6 years ago

Same here +1

As we need nested slides for our project, i will create a pull-request with tests and a fix for this behaviour in the next few days.

Update: Pull Request is ready #13255

Sletheren commented 6 years ago

same here +1 (yes! in 2018 and still not fixed..)

Sletheren commented 6 years ago

The fix submitted by @SoSayethSimon totally! hope it's considered to get merged

ionitron-bot[bot] commented 5 years ago

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

ionitron-bot[bot] commented 5 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/189