datepicker calendar disappears when scrolling on mobile/tablet.
When i click the field (on mobile or tablet) Date , the calender appears but when i want to scroll ( you have to touch the screen to scroll) the calendar dissapears. It's very annoying, because that's the last thing i need to get it working.
You can view the date field below:
http://domburghome.com/domburg/index.php/hotel/jan-tooropstraat-2a/
please can somebody help me. thnxx
This is old, but was in the top results when I was searching for solutions, so here's how I fixed it. If you are using the Bootstrap datepicker, check for the mousedown event handler and see if it is also bound to touchstart. Simply remove the touchstart.
$(document), {
'mousedown touchstart': $.proxy(function(e){
change this to
$(document), {
'mousedown': $.proxy(function(e){
Commit is here: https://github.com/uxsolutions/bootstrap-datepicker/pull/1284
Related
I'm using Ranorex (v10.1.6) for a Desktop Application written mostly in C#. On a Form there is a table with rows and cells. When clicking on a date cell, it should reveal a button to open the calendar. Therefore I require first a click on the table cell which should make the calendar button visible, after which I then can click the calendar button.
Problem: The click() event does not make the button visible. It seems that the click event does for a fraction of a second make the calendar button visible, but then it disappears again.
It seems that the click event does after the click something different which hides the calendar button again. I also tried to accomplish the same with the Mouse Click, and Mouse.ButtonDown(System.Windows.Forms.MouseButtons.Left) followed by Mouse.ButtonUp(System.Windows.Forms.MouseButtons.Left), but this didn't work either.
Anything else I could try to get this to work?
I wrote an electron app that has a html table with click events on the first column. The click events fire as long as BrowserWindow frame: true if I change it to false the click events on the table stop working. I also have a button on the same page that is not affected by changing the frame property. Anyone know why this happens or a work around?
The problem with the click events was that I made the window that the table is located in a draggable region and forgot that doing so makes items not clickable. So in my css for the table I added this line "-webkit-app-region: no-drag" which solved the problem.
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
I have a button that when pressed slides in a uidatepicker, however if you keep pushing the button i keeps pushing a new date picker on top of the previous one. one on top of the other, continually per button press. Pretty much I want to disable everything on the view except the slide in date picker. Is there a way to disable the background and just have the date picker be interactive? Im sure there is an easy fix I'm missing. Thanks so much!!
I'm not really set for answering how to disable the background, but one way to prevent multiple datepickers from appearing would be to set and check the state of the datepicker.
When the datepicker appears you set a bool to YES indicating that there is currently a datepicker active. Now, everytime the button is pressed you can check if there already is a datepicker visible. When the datepicker is removed, simply set the bool to NO.
Cheers!