I'm part of a team building a mobile web app using AppGyver Steroids (PhoneGap). We are having an issue with the iOS7 keyboard displaying a very faint "Done" button on the keyboard when the user is operating in a text area or an input select. I suspect this is a problem that is actually global in our app, but these are the instances where I have observed them.
I've searched and searched for a solution or how to "customize" the keyboard in order to make this "Done" button more obvious, but I haven't found any solutions yet. Can anyone point me in the direction of how to adjust the "Done" button or any other keyboard/input controls?
Attached are two screenshots showing the issue.
http://i.stack.imgur.com/KeFYM.png
http://i.stack.imgur.com/h11IH.png
Have you seen the issue on github? It's now fixed. They'll be including the option for custom colours in the near future.
Related
I have an AccessibilityService that will break if the user turns it on and off through the Android system user interface. I only want the user to be able to disable/enable AccessibilityService through my own Activity which will handle shutting it on and off correctly.
I never encountered this feature before until I tested my app on newer devices. On Android 11 devices there is suddenly an option to toggle "Accessibility Shortcut". This will add a button at the bottom corner the navigation buttons OR it will allow the user to toggle the AccessibilityService by holding both volume buttons at the same time. For my app, it say's it will add the toggle near the navigation buttons.
How do I remove this option?
I am running into the exact same problems. Users tend to enable all switch button they see without reading explanation or videos. Since accessibility shortcut interfere in a bad way with the accessibility service, they got a non working experience.
It seems at first sight there is no option for developpers to hide the option for their accesibility services...
How can I stack a Container over a keyboard similar to WhatsApp more section just like the below gif?
Alternatively, I tried using a bottom sheet, but bottom sheet closed the keyboard and then opened it up.
Unfortunately as other answers have said if you really want this you have to use a Custom In-App Keyboard, even though it's a lot of work.
Drawing over the keyboard is indeed possible on Android, but it is not possible at all on iOS. If you check the same functionality in WhatsApp on iOS it does not do that animation since iOS does not allow it.
The issue here is that the keyboard is controlled by the phone's operating system so Flutter is not allowed to render over it, just as you can't render over the status bar at the top of the screen.
This article at Medium titled "Custom In-App Keyboard in Flutter" by someone called "Suragch" might help you.
Custom In-App Keyboard in Flutter by Suragch
I think is an animation to a "Container" at the bottom of the screen.
Background:
When focused on a WebView control, TalkBack announces something to the effect of "Bing. WebView. Double tap and hold to long press" (note that focus is on the WebView control itself, not the content within the webview). However, as best I can tell, double tap and long pressing doesn't seem to do anything other than pass TalkBack focus into a control within the WebView itself. Our team has testers that specialize in accessibility which filed a bug on us for this "Double tap and hold to long press" announcement. The rationale within the bug states that since this action doesn't appear to do anything, the announcement will only serve to confuse TalkBack users.
This announcement doesn't appear to be specific to our app as I was able to reproduce this behavior on a new, blank Android app with a WebView that points to Google (there it announces "Google. WebView. Double tap and hold to long press"). As I think it helps show what focus I'm talking about, I have added a screenshot of the prototype app I built with the green TalkBack focus indicator below:
Questions:
Is there a reason for why Android insists on announcing the "double tap and hold to long press" piece for a WebView? If there is a functional reason for this, then any attempt to fix this issue may be moot.
Does anyone know of a way to stop TalkBack from reading the "double tap and long press"? Alternatively, is there a way to hide the WebView control itself from TalkBack without hiding the html content within?
What I've tried:
Unfortunately saw no luck setting isLongClickable to false, setting empty onLongClickListeners, and worked with a few of the suggestions in the stackoverflows here, here, here, and here. I tried all of the mentioned changes on a blank app to reduce the possibility that the complexities of our production app has interfered with the experiments I was running. Setting the ImportantForAccessibility field to "No" hides all of the inner html of the webview from Talkback so that is not an option either.
Sidenote that I find interesting: in my experimentation, I also tried setting the WebView's isClickable property to false and yet it was still clickable. So I am wondering if I am possibly focusing on setting properties on the wrong control (or if Android just completely ignores those properties on a WebView control).
I am currently working on an Ionic 5 and I am facing 2 issues with the keyboard.
When I click on the ion-input and the keyboard appears:
The ion-content is pushed up so it is right above the keyboard, which cause everything to be crammed. I tried a bunch of solutions, but none of them properly worked, and most of them involve android:windowSoftInputMode="adjustNothing", which leaves the ion-content as it is, hence the ion-input is not visible and so the user can't see what they're typing and they also can't see the next button, so they must first close the keyboard in order to see what they wrote and be able to move on to the next step.
When the keyboard is about to dismiss, it leaves a white space in the space it was taking up. It's only for a split second but it is visible and makes the app feel like it's slow or lagging.
These 2 issues seem to be very common as I found questions about them since 2014, and I tried most solutions mentioned in the answers but nothing seems to work.
I seem to be having this issue in this app only, but I know that it is not an ionic 5 issue as people faced the same issue in older versions.
What the structure of the page looks like, I had to close all code blocks so that I could take one screenshot:
android:windowSoftInputMode is ised for native fields (EditText,etc..) so when you click on native xml it will take effect. All what you need to do is in your androidManefist.xml on line applicarion or activity, there is keyboardresize="adjustResize" which is the default, change it to adjustPan and content will not be pushed up , instead keyboard will go up as actionsheet from bottom without effecting the content.
I'm using fastclick with my bootstrap 3 responsive web site to speed up the responsive time on mobile devices. Generally this works fine with no issues.
However after much testing I have found this breaks the bootstrap radio buttons on an iphone.
The buttons do work initially but if you change the selected option only the first selected options is passed when the form is submitted.
Removing fastclick stops this behavior.
Or more to the point on my minimal testing page adding fastclick will make the behavior occur.
This happens both in safari and chrome on iphone.
I have found articles saying that adding jquery-mobile and adjusting the markup of the radio buttons will also improve responsive times.
However I have using jquery-ui slider quite a bit in the site and adding in jquery mobile conflicts.
My aim was to disable fastclick on the radio buttons (via the 'needsclicks' class) and let jqmobile take care of it.
Much work as been gone into customising the slider for the site and to make it work and look nice on mobiles devices. I do not want to re engineer the entire site on the hope that adding in jqmobile will help. Nor do we have the time.
How can I solve this. I surprised that I cannot find any other data on using fastclick with bootstrap radio buttons. Sure I can disable the fastclick on the radio buttons but it makes them terrible to use and this is not acceptable for this application.
There is some way I can manually fix these radio buttons to work with iphone.
This is not an issues on Android.
Is there a fix I've not found?
Reproduced this issue also on ipad.
Problem: Fastclick triggers two click events: one for the label and one (bubbling) for the input:radio.
Solution: use 'needsclick' class on input:radio field. More info: https://github.com/ftlabs/fastclick#use-case-2-twitter-bootstrap-222-dropdowns
After some serious brain bending work I discovered that the cause of the issue would only happen after the radio was already selected. This was both by initially setting the radio button IE showing a form again with values pre selected. And when when an initial value is selected and the option is changed (another option selected that is different). This lead me to believe that the process that actually sets the value in the radio button is conflicting with fastclick.
What I did noticed is when no option is selected it would work perfectly. So after must testing with the iphone and added the following code on the touch event for each label. Basically this completely clears the radio buttons each time it is touched. Then it acts like each click of the radio button is pressed it like it first initial selection.
$( "#radio_button_label_id").bind( "touchend", function( e ){
resetRadio_radioid( );
})
function resetRadio_radioid( ){
var ids = array('radio_option_1_id', 'radio_option_2_id', 'radio_option_3_id');
for(i=0; i<ids.length;i++){
//clear all checked data
$('#'+ids[i]).prop('checked', false);
$('#'+ids[i]).removeAttr('checked');
}
return true;
}
This totally solved the issue.
Hope it helps.