We have a Web application that dynamically builds elements via JS. We are testing for mobile usability and are finding that on devices that run 2.3.x versions of Android, our select element behavior is a little strange. A touch on the select element will bring up the usual radio button list of the options and touching an option will select it and return to the page view. However, the option shown in the select box does not update. It still shows the top element in the option list. When the page is reloaded, the behavior is normal. I have tried adding an additional empty element at the top of the list and setting it as selected when the element is built, which seems to clear up the issue on some devices, but our QA tester is saying that behavior remains on others.
Any ideas?
If you're fishing for areas to look into, I had a similar issue for select elements when using the fastclick library in any Android 2.3.x browser. The issue was caused by a hack in fastclick for it to work better under Android Chrome. The fix for native browsers hasn't been merged to this day (https://github.com/ftlabs/fastclick/pull/190).
On another note Android 2.x can be a nightmare in unexpected places once you start adding an assortment of everyday things - CSS animations, opacity, negative margins outside the screen etc
Related
While developing an app wich uses phonegap, angular touch and jquery we stumble in this bug on some android devices.
When touch and move over an non scrollable object the screen goes blank.
When scrooling the body the screen comes back to life.
All the elements stays in dom and still firing events and so.
When using developer tools we still can see the elements.
http://youtu.be/NdTerKi08WE
Has any one saw this bug before?
EDIT
Im using phongegap build so i dont have access to java files.
This problem is only on Android 5 phones.
EDIT 2
Same problem on device chrome browser so its probably not an phone gap problem.
The problem was an issue regard to rtl in the new chromium.
The workaround is to add the "rtl" to css on document ready.
I was able to inspect and interact with (update css) on my android devices using chrome's device inspector then a week or so ago it stopped working. I can still see and interact with devices somewhat, but the styles pane never changes to reflect the element I have selected, and selecting elements is more difficult. Use to be a single click, now its a double click and even that doesn't always work - and when it does finally work, the styles pane still doesn't display the attributes of the element I've just selected, just stays at the root of the document from when page initially loaded - so I can't edit DOM properties as I was able to do.
I've deleted Canary and re-installed, but still have this issue. Has anyone seen this before and found a solution?
I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.
Anyone have any other suggestions where to look?
Is there any way to disable this native select picker?
WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.
I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.
Note: I cannot replicate the issue in either on a mobile or desktop browser.
To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.
Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.
UPDATE: see comments below for a better solution.
I have a form-based app where each form is a scrollable layout of various types of view (RadioButton, Spinner, EditText views, etc). I have tested the app on a Galaxy Nexus with Android 4 and an Advent Vega with Android 4 and there are no issues with focus. I can scroll through the form without any problems.
However, when I test on the target device (a Android 3.2 Orange Tahiti which is a rebranded Huawei MediaPad), suddenly the focus behaviour is very different. It's difficult to know exactly what the tablet is trying to do. If I hide the soft keyboard and scroll, the tablet tries to focus on EditText views as they come into view and pops up the keyboard every time it successfully focuses which is very annoying. Also, on occasion the tablet will randomly jump to the last EditText in the form, scrolling the user away from their position in the form.
I have tried various focus settings (requestFocus, clearFocus(), descendantFocusability, etc) to no avail. However, I doubt the problem has anything to do with config as it works fine on other devices.
Is it possible that the focus behaviour in Honeycomb is different to all other versions of Android? I doubt it but it's worth finding out for sure before resorting to installing a custom ROM just in case I have overlooked a Honeycomb-specific config setting that might fix the problem.
Seems as this is a problem (or included "feature") of the branded version of Honeycomb that comes with an Orange Tahiti.
Upgrading to ICS will sort it out and scrolling, etc will behave as you would expect. Follow the below link for instructions...
http://forum.xda-developers.com/showthread.php?t=1544855
I am trying to develop an android application. I've put a scroll view as main container using graphical layout in eclipse. After that, I had put some UI elements, like buttons. When the total height of elements become more than viewable area, it can be seen using scroll view as expected. There is no problem until this point. The problem is the elements that are not fit viewable are of the screen can not be seen using graphical container of the eclipse interface. There is no problem with the source code, as it runs expectedly. Is there any option in the Eclipse gui to see the UI elements that are not fit the viewport?
I know what you're talking about. When you're viewing the xml file on the Eclipse Graphical layout you can only see the elements that fit on the screen. You can't scroll down to see the entire UI.
I use Eclipse at home and work. I'm using Eclipse Helios Service Release 1, on both systems. For some reason at home, when I'm on the graphical layout, there's a button on the upper right of the graphical viewer that says something like 'Remove Clipping'. (I'm at work now. So can't look to see exactly what it says).
When I click that button, I can now scroll down to see the entire UI. However, on my copy of Eclipse at work that same button isn't displayed. I've tried to figure out what the difference is between the setup on the two copies of Eclipse. But so far haven't been able to figure it out. Note, I've tried viewing the same exact xml file, within the same project, on both copies of Eclipse.
The problem seems to only occur when you're using a scrollview and all the ui elements won't fit on the graphical layout screen within Eclipse.
I have the same problem. I've been unable to troubleshoot, so I've resorted to using my physical device instead. I try to get the bulk of work done within the the Eclipse GUI... then nudge and polish with my device. Its a PITA to be sure, uploading what seems like a million times only to move one element a tiny bit more.
Best practices recommend developing on a device. Further, the Layout-tools && scrollView basically make it mandatory to really know what is going on. I can't seem to form this into a coherent search argument as my Google-fu has let me down on this one.
BTW - I'm using the shiny new r10 ADT plugin and I've been struggling with this for about 6 months.
Another workaround: You can use a smaller-ish tablet port in the GUI to get a really rough idea of what you are working with.
If your target layout is for a phone or smaller device, simply switch the preview to a larger screen size configuration.
In the upper left corner, under where it says 'Editing config: ~default', The list provides you with a number of screen sizes to target. Pick the 10.1 in version, and it will scale the preview, and will then allow you to see and work with all of the views that have scrolled off the screen.
Cheers-
I think this is an old topic but I was having the same issue. I have 2 apps made from outsourcing. when I opened each in eclipse one would show the full contents of the scrollview and one was clipped off. After numerous google searches nothing came up as a solution. I just happen to look and saw the app that is clipped was android version 1.6 and the app that shows everything like i wanted it to so I can use the graphical layout for a scrollview was android verion 2.1.
So i changed the one app to version 2.1 and it fixed it. noone seemed to address that. so for me the fix was make sure the android version you are building for is 2.1. you can always change it back to 1.6 compatable after you are done designing.
Hope this helps
The best way i could figure out is to give negetive top margin to the root layout that will make the rest of the content visible. This is only for dev purpose and should be removed when completed