0

I am new to IONIC world. Currently I'm migrating a web application from ioinc1.7.16+angularjs+javascript to latest versions i.e., ionic 3.10.0+angular5+typescript. I am using windows 8.1 OS. I am using Node v8.9.1, npm v5.5.1, ionic 3.20.0, cordova 8.0.0.

In my existing application ion-scroll works fine. I mean horizontal scroll bar is not visible but able to click and drag or slide left/right a container smoothly using my mouse. My scroll container simply contains a list of images only.

Issue: But this same horizontal scroll click and drag or slide left/right is not working in my migrated web application which uses ionic 3.20.0

I'm breaking my head to make it work since last week but no luck. Can anyone please help me to fix this issue?

Here is my migrated code:

HTML

<ion-content>
  <ion-scroll scrollX="true">
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
  </ion-scroll>
</ion-content>

SCSS

page-home { 
     .inline{
         display: inline-block;
     }

     ion-scroll{
         white-space: nowrap; 
         height: 400px;
         width: 600px;
     } 
}
Dineshkumar
  • 1
  • 3
  • I have tried to implement few stuffs from https://stackoverflow.com/questions/35959258/horizontal-scroll-in-ionic-2# but it didn't help me :( – Dineshkumar May 21 '18 at 07:26
  • Please help me to fix this issue or let me know if any other way to achieve this in Ionic3 – Dineshkumar May 21 '18 at 07:27

1 Answers1

0

your code looks fine. sliding on click and drag wont work on browser. test it on a device. it should be working fine.

shadowfs
  • 33
  • 1
  • 6
  • Thanks @shadowfs for your reply! Unfortunately, It is a web application. I should make it as workable on the web for sure. In future, we may extend this application to Android and iOS. Thats why we decided to continue with ionic latest version. If possible, can you please check on Chrome and let me know. Thanks in advance! – Dineshkumar May 22 '18 at 05:55
  • 1
    Sliding scroll effect is working in ionic 1.7.16 but not ionic 3.9.2 It seems strange :( – Dineshkumar May 22 '18 at 11:07