I'm working on a mobile web app. The issue is apparent in some Android's (I think only 2.3.x phones).
There is a label and an input submit button on a page. Both are styled to have the same font face (TradeGothic, created by a #font-face style).
The label text always renders correctly however the button text never shows up the first time the page is visited.
So if you go to the page and either click on the button or go back and then forward (to the page in question) then the button text shows up fine.
I've tried resetting the value of the input button using jquery. I've also tried setting it's html and text however there are no changes.
What else can I try? (Besides losing the font.)
Slightly hacky option, could you not use an image for the button which is using the desired font?
I fixed the issue by loading a dummy html page in the webview (in the background) while the app is starting up.
The dummy page consists of only the html for the button and it loads the same css file.
Related
I'm creating a browser with a start page and edittext that that directs you to the actual browsing section of the app when a URL is entered. On the start page I also have 5 working static speed dial keys in a gridview. I have placed an add button which opens a dialog box with two edittexts, one for the title and one for the URL along with two buttons, create and cancel. After getting this far I'm stuck. I tried to add another Room database and tried to set it up similar to how I have my tabs but that didn't work at all. I think I need to somehow be able to dynamically add an image button that saves the website URL and title and possibly grab it's favicon. At this point at least the button, title and URL, and I can figure out the favicon later. Can anyone give me a little insight as to how this would work? I can post code if needed.
I am trying to create a JavaScript code that selects all text from a textarea when the user focus it (using onfocus event).
The textarea contains a very long text which is a URL and uses just one row (one line of text). Wrap text is not allowed with "word-wrap" set to "normal", "text-wrap" set to "none" and "white-space" set "nowrap". And "overflow-x" property is set to "auto" (I also tried to set it to "scroll"). I don't want to use an external service to compress the URL and compressing the URL parameters with compression algorithms is not enough to make it little enough.
All works fine with desktop browsers: the user focus the textarea and all text is selected (they just need to copy it with a keyboard shortcut or the mouse). But on mobile devices (Android and iOS) there are some issues:
Under Android's default browser, when you focus the textarea (although it has readOnly attribute set to true), it shows the on-screen keyboard. No toolbar with "copy" option is shown. But you can hold the finger on the textarea again (which makes you lose all selection), then the "copy" toolbar option appears and you can choose "Select All" and then "Copy".
Under iOS 8.1.1 (using Safari), it is even worse. The text gets selected but the toolbar which has the option for "copy" (to Clipboard) hides as soon as "input" or "setSelectionRange" method are called (it doesn't matter whether I call those functions with a setTimeout or not). When you hold the finger on the screen (losing all selection), you can choose which part of the text you want to select but you can't select the text that overflows the textarea. The system doesn't provide an option to select all text as on Android.
Attaching the function that selects all text to another event which is not onfocus (onclick, onmousedown, onmouseup, ontouchstart, ountouchend...) doesn't work since makes the toolbar with "copy" option hide as soon as it is called. I also tried to use setTimeout and even setInterval with all those events listed without success. Returning false or preventDefault doesn't do anything at all. I also tried to use "selectionStart" and "selectionEnd" instead of "select" or "setSelectionRange" methods.
So what I need is either a way to avoid the "copy" toolbar being hidden or otherwise a way to let the user select all text area (and copy it, of course).
Thank you in advance.
Cheers,
Joan
I am creating an android application which uses webview to show a static html page which contains TinyMCE editor. When i click on editing area of editor for editing purpose, softkey keyboard opens and whatever text is written in text area gets cleared. In addition to this when i select text(by long click on text) for changing its style, and when i click on any of toolbar button(i.e. Bold, Italic, Underline etc), again text get cleared. This problem is not only with my app but also with default browser of android(although works perfect with Dolphin browser).
Device for which application is developed is a android-TV device(A75). This behavior is with this device particularly. The same behaviour is with some other WYSIWYG editors like CKeditor, nicEditor, bootstrap-wysihtml5 also.
What i have tried so far is, to hide softkeyboard when editor is clicked for ediging purpose, from code given here. Although i was able to hide softkeyboard from given code but, in that case i was not able to edit and select text for formatting.
Please help me to solve this prblem.
Thanks in advance for any solution.
I'm rendering a html page(html page is constructed using JQuery, text with html tags, used a canvas in it) to Activity with web-view & to default browser comes with device. When I long press on text in html page I'm getting dark grey colored boxes on it.This is unexpected & weird behavior of web-view.Please see attached images for my problem
I searched for such issue but not getting any solution for it.Same html page is tested on Mozilla app but not getting such square boxes, also on ACER tab running HoneyComb its working fine no such weird square boxes.How to get rid of such boxes?. I using Samsung Tab2 10.1 with android version 4.0.4. Please help me to solve this issue.
I don't know what you code for it?
But you can validate the page on http://validator.w3.org/
There may be problem with your html like any tag open but not closed, etc.
So once you validate it, then test it again.
Normally when a native textfield in an android view is focused, the view scrolls automatically to keep the field visible when the virtual keyboard appears. And it's normally the same behaviour when I select a textfield in a webview (so I mean a html text input in the page that loaded in the webview).
But for some reason, it doesn't work in my case. I have a webview that displays a form and when a select a textfield, the view scrolls down to the bottom of the page and the field I selected is no longer visible. What should I check in my app to prevent this to happen? If you need more details, just ask. In this way I can show you directly what you need.
Thanks in advance.
EDIT: on android 4, this is not happening. I encountered the problem on android 2.2 and 2.3.
android:windowSoftInputMode="adjustResize"
Add above tag in your manifest file's activity tag. The activity will be the one which displays webview