Ngx-drag-scroll: drag scroll not working in mobile view

Relates to #20

The PR is up, I'm just going to review the code again and push a new version. Feel free to throw in any comments if you think there is something wrong in the PR code. @suresh2018 @nachocoig.

1.3.7 is out. Let me know if that does not fix the issue for you, thanks again for your patient.

@bfwg

1.3.6 showed click cancel error but 1.3.7 not showing this error .
this version also drag scroll not working in mobile .

thanks in advance

not work 1.3.7

@suresh2018 It is working for me. Is drag scroll working for you on desktop view?

desktop working fine .but not moblie(iphone 6 plus)

Weird, can you show me a chunk of your carousel code? Have you tried on an actual device?

* horizontal scroll *

div class="hideoverflow" drag-scroll

            img *ngFor="let img of pic.images; let idx = index" [src]="img .Image" 
              class="scroll-images"

          div

Have you people tried the drag-scroll demo (in README.md) on touch devices ?

@rahil

demo drag scroll not work touch device

@suresh2018 @bfwg I am using this lib in my Ionic 2 project. The scroll works fine for me, if I emulate on Chrome Dev Tools Mobile emulator, but there are few major problems I am having

1. The screen where drag-scroll is used, disables all click events on that screen
   For example

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <button ion-button (click)="foo()">Click Me!</button>
        <!-- On mobile view click stops working. If I remove [drag-scroll] it starts working again -->
      </ion-col>
      <ion-col>
        <div drag-scroll>
          <!-- *ngFor let item of items (horizontal scroll) -->
          <button ion-button (click)="someFunc()"></button>
          <!-- also click event don't work in mobile view. Fixes if [drag-scroll] is removed! -->
        </div>
      </ion-col>
      <ion-col>
        <button ion-button (click)="bar()">Click Me Again!</button>
        <!-- On mobile view click stops working. If I remove [drag-scroll] it starts working again -->
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

1. [scrollbar-hidden]="true" removes the entire drag-scroll component from the screen (Ionic 2). "false" doesn't.

Hi, @rahil051

1. click event not firing is fixed in v1.3.7.
2. you need to either write scrollbar-hidden="true" or simply scrollbar-hidden for a fixed attribute. If you want to bind the attribute to a variable in your component, you need to write [scrollbar-hidden]="flagVariable" note when to use the square brackets.

For more information, please checkout https://github.com/bfwg/angular2-drag-scroll/blob/master/demo/app/home/home.component.html#L26

@suresh2018 I failed to reproduce the touch issue on iPhone 6 Plus. I'm testing on the demo app. Can you clone this repository and do a npm install && npm start to startup the demo app on port :4200? You can use the Chrome devtool to check if it is working for you.

Hello @bfwg, sorry for my late reply (I was in minivacations ;D)

I reinstalled your angular component demo and yes, it works in mobile version!
I have also tried using it into my app, and it works too!

Thanks for ur attention!

Nice work!

Hi @bfwg,

finally , i find this issue .
need to set horizontal width then only it wil works

thanks ..

Hi @bfwg,
finally , i find this issue .
need to set horizontal width then only it wil works
thanks

Sweet, glad that worked for you guys. I can safely close this issue now.

Thanks for reporting this issue again!

Hey, this is by far the best ng2 carousel library! I can't seem to get it to work on mobile, though.

• Demo app works fine on desktop and mobile
• My code only works on desktop. Drag doesn't work on mobile

need to set horizontal width then only it wil works

I've set width:100% on drag-scroll, on a wrapper outside of drag-scroll and on a div inside drag-scroll (all possible combinations) and it's still not working.

EDIT:
I've cloned the repository, deployed and tested it on mobile and it works fine. I have the same html and css as in home.component, but the drag only works on desktop. I assume I don't need angular materials in my project.

Hey @kzntswsk , thanks for the feedback. Can you make a small demo with https://plnkr.co/? I can't help you without toying your code 😄

Hey @kzntswsk , thanks for the feedback. Can you make a small demo with https://plnkr.co/? I can't help you without toying your code 😄

I've also encountered this. I can't do a plnkr right now but it seems to only do this with scrollbar-hidden="true" whereas just the scrollbar-hidden doesn't do anything.

EDIT: If I go to .drag-scroll-content in dev tools and unselect overflow: hidden auto; it fixes it, but the scrollbar is again visible. So this would seem to have to do with the method used to hide the scrollbar for mobile.

The problem is that events are not fired in Chrome Dev Tools in device mode