Wrong clickable area of a button on mobile - javascript

This is my website.
I'm currently working on multi-choice filters, or rather on resetting them. There is no problem on PC.
Click the X button and it clears the filter
But the same simple thing doesn't work like this on mobile devices. I don't understand why.
You need to click an area below the X button, well below, to dismiss the filter.
This is how you need to click to make it work
Also, I just realized that when clicking like this there is an error in the console.
Error in the console after successful dismissing
I'm testing the mobile behavior in Opera (PC version, last update) using the Inspector with mobile simulation; the device is irrelevant. You can try it too.
The same behavior occurs on an actual android, both in Chrome and Opera.
Side notes!
If you activate the dropdown search in any multichoice field, while it's visible, the close buttons work perfectly well and precisely on mobiles. (Although the behavior of this dropdown panel is weird too. It does not always drops down when focusing on a field, as it does on PC.)
When I tried to locate the close button using the console and Jquery and then applied .click(), it worked. So I guess the problem doesn't lie in JS.
If you want to test it on a phone choose the Desktop site. On the mobile view, though, another peculiar thing occurs-the blue X button to the right of the field doesn't work.
PS. I've been wracking my brains for 3 hours to solve this mystery, yet no result. Please help!

The culprit was the "chosen" plugin. Don't use this crappy plugin. They simply don't support mobile devices and have tons of bugs.
I switched to Select2 and everything is great.

Related

Select dropdown boxes not working on Android Chrome and Firefox

UPDATED 5/20 with resolution!
After much research, I found out the issue had to do with the fastclick JS plugin not working well with older versions of android. I added the class "needsclick" to the the select box and VOILA! -- I am able to select the box now in older Android version (4.2).
It appears the fastclick was causing a double "touchstart" event, so the select box was opening and then closing again because of a double click.
Original Post
I am having trouble getting a select box to work on Android device. It works on all other devices, but on certain android devices, I'm unable to select the box. It looks as if it's getting highlighted, but the options never open.
Here are examples of the select box that are not working in android:
[examples removed]
I have tried to play around with the positioning but am still getting this error. The site is hosted on Bigcommerce, but I don't think that is the issue. Wondering if anyone has had this issue before or might know a workaround?

Android ActionBar doesn't hide after text input in cordova/phonegap with marshmallow

This seems like it could be a bug, but as with all things i'm sure there is also a work-around. The problem description is this; using cordova to develop an android app with a simple page with some textfields, when typing into those fields on the app the softkeyboard appears so that you can enter text, but then when you either "enter" or focus on another element, the keyboard fades away but leaves the "ActionBar" at the bottom of the view.
The ActionBar remains, and if one's app is designed to run full screen - the action bar may overlap app content. The ActionBar itself cannot be swiped down or removed by the end user except for swiping down from the very top (the title bar) then swiping back up again.
This seems to be an issue as of Android 6.0.0 or perhaps I just wasn't noticing it before.
I've noticed that with the plugin cordova-plugin-dialogs that when i use the alert dialog after i close it, the actionbar hides, but I think that ultimately the scenario that would work best is that after X-timeout from typing in a textfield and/or the softkeyboard fades out, the ActionBar should fade out too.
Any suggestions on how to manage the Android ActionBar in PhoneGap - I've seen some other similar questions but generally asking how to show it, seems like getting it to hide is less popular?
After much searching I was able to determine that the phonegap fullscreen setting doesn't necessarily give way to full "immersive" mode by default. After adding the plugin cordova-plugin-fullscreen and setting the immersive mode from the plugin, I was able to resolve this issue.
https://www.npmjs.com/package/cordova-plugin-fullscreen

How can I get a VB webbrowser control to click a button that cannot be clicked manually in the control but can in an actual IE window?

I have clicked many buttons without ever hitting a problem like this. I'm using VB 2010. If I click on the control programmatically or manually, the screen flashes like it is just refreshing. However, if I open a separate IE window, I can click the button and it advances to another screen as expected. I have researched this on other sites and have found one suggestion that the control is using a different version than the full version, which is IE 8 in my case. This still doesn't provide a solution. Can anyone please help? Here is the code which clicks the button as well as the html of the button.
WebBrowser1.Document.All("posForm:estimate").InvokeMember("click")
<button onclick="validateForEstimate(this, 'NonITS');" type="button" name="getestiamte"></button>
Maybe try the Microsoft Browser go to your toolbox right click and click choose items then go to COM components and use the filter to find Microsoft browser then check mark it. Add it to your form and done.

Bootstrap's dropdowns close in less than a sec after pressing them (Android 4.2.1, stock browser)

There's a problem with Twitter Bootstrap's dropdown menus on mobile. If I use Android's stock browser and click on a menu, it will open and close in less than a sec without me doing anything else. The same thing happens if I press the dropdowns on the official Bootstrap site, so this has nothing to do with my code.
If you want to keep the dropdowns open and fix this, you have to tap them for a little bit longer, smth like 1 second. But obviously I'd like a simple tap to be enough.
Is this normal for Android's stock browser? In Firefox and Opera Mini dropdowns work just fine.
Thanks!
PS: no, I don't have any form inside dropdowns. Only links that work fine in other browsers.
This is an android browser thing. They handle links with dropdowns as both a hover and click. Other browser such as iOS handles menus with dropdowns as just the hover then another click to initiate the link.

Lightbox close link doesn't work in IE7

While the lightbox example page works fine for me in IE7, I seem to have broken it in my implementation.
I've written a Lightbox plugin for Mango Blog and everything works fine in Firefox. However, in IE7 the "close" button doesn't work. If I'm fast enough to get my cursor into the position that the close button will be placed before it slides into place, the IE status bar shows the "#" link, but clicking or moving the cursor makes the status bar go blank -- and of course nothing happens.
Not that it was that necessary, but I made a quick screencast of the behavior in IE7. Note the cursor not switching to a hand on the close button.
Any ideas how to fix this?
Perhaps you should try to use the actual 2.0.4 version of Lightbox as a base, there seem to be several changes in the DOM code, although nothing like the bug you described is mentioned in the changelog.

Categories

Resources