we are developing e-commerce website for our customer and we have a strange problem just with iPad. User cannot select some elements such as dropdowns and radio-buttons in product configuration on iPad. We have noticed this in Safari and also in Opera browser. The URL is http://slovenskeokno.sk/sk/plastove-okna/311-okno-balance.html. Everything else runs well on other devices (PC, Android) even on iPhone. Does anybody have a clue where is the problem? Thanks.
In situations like this, you'll need to promote these layers a bit higher using z-index. This fixes both of your issues (unreachable radio buttons & dropdowns).
.form-group {
z-index: 1;
}
Related
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.
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?
Building atop Silvio Moreto's Bootstrap Select I have a custom dropdown with no issues in Chrome, Firefox and Safari on Mac, iOS and Android (private browsing or not).
Windows
In Windows the select renders how visually expected -- everything looks to be in place -- but clicking the select does not open the dropdown menu (which is kind of the point).
I'm really stumped and surprised that the operating system could have such an impact on this component. I also have little experience working with Windows machines and hope someone may be able to give some clues about what could be happening.
Live example
View the problem in real time here
Has anyone experienced a similar problem? How could this happen?
Its feeling as if the select options are not getting clicked at all or are responding very slowly.All the other things in my app are working normal.
when I click on the select input boxes it works fine on my computer but not well on my cell phone.I tried using several other android phones but it did not help me.
I have used angular js routs to create new pages.
Here is my website link http://gananatraj.com/gdanceapp/www/#/home
Login as trainer#trainer.com
password as password
I first noticed this issue after updating google chrome mobile browser to the latest version .that is version 53.x.x.x. But now noticed issue on mobile mozilla browser as well.
Other website`s select options work fine.Do not know the exact cause for the issue.
its like a mobile app.. The select is not working on chrome and Mozilla mobile browsers.I cannot figure out what is wrong...Can anyone help me trouble-shoot this issue??
Your help is really appreciated.
Currently am developing a big project in AngularJS(version 1.3X), Bootstrap(3.3.1), animate.css and few other libraries.
I do test my application on different devices via Google Chrome Developers mode and on few browsers like Google Chrome, Mozilla Firefox and Safari(for Windows7).
I also have possibility to perform tests on Android device and iPhone.
For some strange reason my application seems to work on every device except for iPhone 5 with Safari 5.1.7(when using same Safari but on Windows7 it does work).
Has anyone before stumbled uppon similar problem?
#EDIT
Sorry, forgot to mention what is actually happening.
When I try to press button that's supposed to toggle (using jQuery, I know it should be done via ui-routing, but that's how my boss wants it) portion of the view (panel) it does not work. Buttons do not perform any actions. There is no reaction.