-1

I'm using this plugin https://github.com/weareoutman/clockpicker to display a clockpicker selector. Works fine when I test it on my browser but I need to run my application in a 7" tablet and when I'm trying to change the time the page is scrolling instead of selecting minute by minute, so I', only able to pick 5, 10, 15, 20, 25... minutes instead of 1, 3, 13, 22, 44, etc...

In other words, my problem is that the page is doing a scroll instead of changing time in my control. This happen also when I use the device toolbar on chrome, I'm not able to select a time by dragging the cursor, its only possible by clicking.

var input = $('#input-a');
input.clockpicker({
    autoclose: true
});

// Manual operations
$('#button-a').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
            .clockpicker('toggleView', 'minutes');
});
$('#button-b').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
            .clockpicker('toggleView', 'hours');
});
body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size: 14px;
}
.container {
    padding: 20px;
}
<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<div class="container">
    <input id="input-a" value="" data-default="20:48">
   
</div>

What can I do to solve this?

User1899289003
  • 850
  • 2
  • 21
  • 40

1 Answers1

0

I think your problem is loading clockpicker assets with http instead of https. You should try and change everything to https:

<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

Here is a screenshot video of a table Android 8 emulator using your code that shows it's working. You can test it yourself using this link: https://zikro.gr/dbg/so/60102176/.

Clockpicker Android tablet

UPDATE

You should add touch-action: none to the body using CSS. This will disable touch events when the clock picker popups:

var input = $('#input-a');
input.clockpicker({
    autoclose: true
});

// Manual operations
$('#button-a').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
        .clockpicker('toggleView', 'minutes');
});
$('#button-b').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
        .clockpicker('toggleView', 'hours');
});
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    touch-action: none;
}
.container {
    padding: 20px;
}
<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<div class="container">
    <input id="input-a" value="" data-default="20:48">
</div>
Christos Lytras
  • 36,310
  • 4
  • 80
  • 113
  • Hello, this is not the problem, if you open the URL on chrome and then open the console and change to any device view the plugin do not work. Also I'm not loading the file with http or https, I have the file locally on my project. The http is only to bring this example. – User1899289003 Feb 06 '20 at 21:09
  • Yes, I can see it on the device toolbar. But as you can see, I have tested it on a tablet emulator and it works, so I assumed this is the problem. I'll check it out again. – Christos Lytras Feb 06 '20 at 21:11
  • Try add `touch-action: none;` to the `body`. It works for me. See the updated answer. – Christos Lytras Feb 06 '20 at 21:19
  • @User1899289003 did the updated answer resolved the issue? If it didn't please let me know about how it worked for you. – Christos Lytras Feb 07 '20 at 15:25
  • Ey! Sorry for not answer, this solution did not work for me. I found this other question https://stackoverflow.com/questions/59064591/clock-picker-not-moving-on-modal-popup-scroll but also is not solved. – User1899289003 Feb 07 '20 at 17:52
  • What browser version are you using? – Christos Lytras Feb 07 '20 at 17:54