I've tried this old solution but it doesn't work.
I'm using android 4.4 which has a major update for the web view widget. My web application is based on jquery mobile
When I click on a link in my web application, the web view put an orange border on the active link.
You can specify outline: none; in your CSS to hide the focus ring. Here's some more information: http://devtacular.com/articles/bkonrad/how-to-remove-chromes-orange-outline/
However, be aware that users navigating using a keyboard may be relying on the orange outline to indicate which element currently has focus, so you should consider providing some other affordance for them.
Related
I want my app to launch chrome but also monitor the user's actions on chrome, such as navigating, back, etc. I think I can launch chrome using Intents, but I'm not sure about monitoring user input.
With chrome application is not possible. For do that you must implement a webview within your own app.
Well you can try Custom Tabs
With Custom Tabs you can get instance of browser which support CustomTabs like chrome without creating a web view. As it provide navigation awareness, the browser delivers a callback to the application upon an external navigation. You can modify and update following -
Custom menu
Color of the address bar
Custom action button
Custom enter and exit animations
Check Custom Tabs Implementation Guide
You need to use Web view or create your own browser then you can achieve your goal.
fullscreen hides both the Android navigation and status bars (requiring you swipe from the bottom to show the navigation bar over the app), and standalone hides neither, when it comes to the display property of the PWA's manifest.
Simply, I want the bottom Android navigation bar to always show but without showing the top status bar. I wonder if I am missing some HTML meta or manifest JSON property or some other way to accomplish this?
I will expect most users to install the PWA via the web, not via the Play Store (so no TWA, Android application wrapper, etc.)
As far as I know this is not possible.
With the web-manifest you have different choices: default, standalone, fullscreen (see screenshots below):
On the Google docs page, also a "minimal-ui" value is available:
This mode is similar to fullscreen, but provides the user with some means to access a minimal set of UI elements for controlling navigation (i.e., back, forward, reload, etc).
Note: Only supported by Chrome on mobile.
Reading the description it seems this is what you are looking for, but unfortunately the top status bar and also the page address (read-only) is displayed. Therefore I do not think you can achieve what are you looking for with the standard display values of the web manifest.
I have an application that needs to have two separate behaviours when the keyboard is shown:
Certain controls need to be hidden, for which purpose a keyboard show/hide event is required (a requirement discussed in this question, among others).
I need the web view to resize so that controls which are aligned with the bottom of the view remain visible (a requirement discussed in this question).
The common suggestion for the former is to use the ionic-plugin-keyboard plugin (despite this not being an ionic app), which provides events native.keyboardshow and native.keyboardhide that work in both iOS and Android for this purpose.
The common suggestion for the latter is to use the cordova-plugin-keyboard plugin, which provides both a preference that can be configured using config.xml and a method that controls the setting at runtime. While this plugin also includes events for detecting keyboard changes, these events are apparently only available under iOS, but I need my application to run on both iOS and Android.
Unfortunately, these two plugins are not compatible: both define the same javascript interface object (cordova.plugins.Keyboard), so only one can exist in a project at any time.
How can I get both of these behaviours working at the same time?
I'm using HTML5 validation to validate a form. The validation process works but the problem is how validation messages appears in Chrome for Android.
How can I fix this? It happens every time I test.
It seems you have two problems:
The shadowdom of older webkit versions can be targeted with general selectors. I.e.: form.my-form div Try to use classes as last selector part: .my-form .my-div. Maybee you should also check wether a * {box-sizing: content-box;} needs to be addressed. Alternativley you can fix those styles, by re-adding right styles using the webkit pseudos: http://trac.webkit.org/wiki/Styling%20Form%20Controls#Formvalidationmessage and http://trac.webkit.org/wiki/Styling%20Form%20Controls#WebKitr82180orlater
I'm not sure wether this is happening, here (your picture is not clear). There is an overflow bug in older webkit versions. Do not use overflow: hidden with positioned element as a wrapper for your form fields
Some of the users of my website are telling me they find it annoying when they try to touch certain links and instead of activating the link it zooms into the link and associated metadata (which is made up of a few links).
So how many css pixels of separation are needed between the link and the associated data to stop this behaviour?
I also would like to know that, and eventually a js/css trick to disable it on demand.
You can also have a look at this question :
How to prevent google chrome android browser to display the magnifier when users click a button?