I use select2 in my website. I test it in the mobile device and found that select2 opened when keydown event happen. When the user tries to scroll the page and touch select2 element it opened while user wants to scroll page not use select2. This is not user-friendly. Now I like force select2 to opened when click on it.
Is this possible?
$("#element").select2();
Related
Steps to reproduce:
Set-up a select2 dropdown in Tags mode.
Start typing a tag.
With the focus still in the drop down, using the mouse wheel, scroll to a different part of the page.
Now click somewhere.
Observed results:
You are scrolled back so the tagging drop down is in the viewport.
You can see this behavior in action on the projects demo page.
Expected results:
Clicking away from the tags dropdown should not affect scroll position.
This is particularly annoying in an app I'm working on because the Save button of a form is off screen. If the user enters a tag, then scrolls with the mouse wheel to the Save button (which IMHO a very intuitive flow when adding a new tag to an otherwise filled out form) and clicks the Save button, the click won't register on the button. Instead the user is auto-scrolled back to the dropdown with focus no longer in the drop down. Now, they could scroll again and click the actual button.
Anybody know how to fix this issue? I have no qualms with updating the source (already had to do so to fix other select2 quirks).
(FWIW, as of now I haven't logged a bug in the Select2 repo, since it seems questionable to me how actively it's being maintained)
Natural behaviour of an input field when you click on the 'body' of the document, is to blur the element. However with the autocomplete directive on desktop this works, but on mobile it never lets you close the menu unless you pick an item or refresh the page.
I thought this was just my setup, however if you run chrome and emulate an iphone 5 it does not close the autocomplete dropdown list when you click outside it.
Is this possible out of the box?
One option is set your css with rule under:
.md-scroll-mask{
display none
}
I have two different pages with a clickable element
located on the same position. On the first page there is
a menu button which will open up if a user clicks on it and
on the second one, in the exact same position there is a back
button which will redirect the user to the first page.
Now to the problem; whenever a user clicks the back
button on the second page he will be redirected to the
first page which is intended, but it will also open
up the menu automatically which it shouldn't do.
I am building an app with PhoneGap where i am utilizing
the fastclick library in order to eliminate the 300ms click
delay. If the fastclick library isn't used, the
application works as expected but then it wont feel as responsive.
The fastclick library works perfectly under iOS environment.
What could be causing this undesirable effect?
I think the problem is more because the click on loaded on a mouse event and not a touch event that you are experiencing this issue. Can you try loading the event handler on a touch event instead ?
click/tap event not working correctly
click or tap seems to fire on the new element that appears even though originally handled by other element which caused the element to appear in the first place... wtf?
I have a mobile web app where a button brings up a bootstrap modal with a unordered list in it. The items in the list make a selection and close the modal. In standard chrome and chrome's android emulator there is no issue. But on my tablets, when you click the button, if the modal covers the button, the modal is brought up then a selection is made on the modal exactly where you clicked on the button. Its like a duplicate click/tap is being processed at the same location. I have tried tap, click, and touchstart events for both the button and the lineitem. What can I do to prevent this issue?
In my Phonegap application i need one div which is scrollable, When user click on it device keyboard should be open and text should be writeable in div. But i dont know how to open device native keyboard for both device. Is there any plugin available for this functionality.
Have a hidden input field, and onclick event of that div, simply call focus() for that input field. It'll automatically bring up the keyboard. And then you can read the content of the input field and write that into the div.