I am developing a cross-platform application using phonegap and jquery. In my HTML document I have a select element with several options. On Android, when the user taps on the select element, an overview of all options opens using the standard Android dropdown (something like an overlay with all options). So far so nice, but unfortunately my options have too much text that eventually gets cut off at the end. How can I adjust the size of the text here? Any hints? Adjusting the text size via CSS is simply ignored. I am thinking of using radio buttons instead, but that is just a workaround for me.
I read listview is another way to handle this problem. Select is fairly limited to my understanding.
Related
I need to implement AutoCompleteTextView in react native. The problem is that there is no such built-in component. All the modules and libraries available to mimic this feature is not completely similar. The main issue is the suggestions are not appearing over the view(like that of select box/picker). Even if it is then it is not behaving perfectly withKeyboardAvoidingView.
The whole point is it is not working like native AutoCompleteTextView for Android
The other solution is using native UI element. But I want this component for both iOS and Android. Any help would be appreciated.
I want to achieve this option like tag user on the Facebook app
P.S.: Excuse the typos as I am using a mobile device.
After searching a lot for available Libraries and module, I came up with my own implementation of custom AutoCompleteTextView.
I have created a gist for AutoCompleteTextView.
The idea behind:
*There is one input field on the focus of this field keyboard appears.
*When keyboard appears we calculate space from top to input field and from input field till the start of keypad area.
*Will display an absolute positioned scroll view Suggestion area on top or bottom of input field based on the space calculation above.
*When keyboard goes away we hide the suggestion area.
Suggestions are welcome on how to improve this thing.
Here is the android native AutoCompleteTextView component - https://github.com/rajsuvariya/autocompletetextview - its a work in progress.
I was wondering if it is possible to style the list box when you tap a drop down (select) on a mobile. I have a feeling it is browser level so I can affect it but maybe I am wrong...
This is the kind of thing I mean...I have a drop down of delivery choices and when tapped this box pops up:
On mobile as on desktop, select options list is not affected by your css, this is handled by the browser itself.
If you want to customize options list, you can use javascript to make an "alias" list (with ul, li) that you can design with css.
There is also libraries in jquery that can make your work easier (ex: https://select2.github.io/)
I'm currently developing an application targeted at android and desktop devices using apache cordova and HTML5.
In order to get the numeric keyboard to pop up I've used input type="number", which works fine.
However, the input field should also accept strings. The current functionality of type=number is that the ui seems to allow for strings to be entered, but the value property of the element is not changed if the input is invalid (e.g not numberic).
Is there a way of getting the numberic keyboard on mobile devices, while still being able to enter text?
My inital tries consisted of capturing the keydown event and manually setting the this.value property. I've tried this using jQuerys .val() and of course the more 'native' approach element.val += char. None of which work. UI is updated, but the change is not reflected in the model.
EDIT
For the next guy trying to achieve this.
1) The HTML solution.
As #LuudJacobs mentions in the comments below; There's currently no way to decide which keyboard is shown except for defining the type-attribute. Though some devices have a button to go back to alphabet keyboard, its not the case for every device. And can not be used reliably.
2) Writing a phonegap/cordova plugin.
It is possible to write a plugin to show and hide the keyboard at will. But, as far as I could find, there is currently no way of programmatically telling it to default to the symbols keyboard. Thus the functionality achieved is similar to using type=number and type=text in the HTML. Another problem with this approach is the diversity of keyboard for android devices, where even users themselves can install their custom keyboard. The functionality of the keyboard can are therefore unknown. What works on one device, may not work on the next.
3) JS/HTML/Canvas solution
Finally... A feasible solution. I suggest taking a look at this walkthrough as it shows an easy way to creating the keyboard using just html and js. Another option would be to use a canvas, and draw the keyboard yourself, but I would imagine that this is more error prone and harder to do.
As explained in the HTML5 spec you can not have anything but valid floats in a input type="number". So You can not. On a sidenote: how would users enter text when they'd only have a numeric keyboard?
I am working on a relatively simple app using PhoneGap that is designed to be a field guide. Basically there will be buttons for different sections of the field guide. Tapping on one of these buttons will transition the user to another page with the content.
However, I would like to implement search functionality if possible. For example, the user could input a query and the app will return which "pages" that query appears on. I'm not really sure what the best way to go about implementing this would be, so any suggestions would be greatly appreciated.
The only type of search function I've used thus far with PhoneGap is using a filter search to search on a set of list elements.
If you have lots of .html files with your conten, a good option is to use Zoom search engine.
You have to execute a program and it will scan your .html files and index keywords.
You will have to style yourself the "search results" page, because the default isn't mobile friendly
I'm trying to figure out how to code for proper use through Android phones. Looking at...
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_select_multiple
...it looks nice when selecting options. However, the page always only shows the first option in the list no matter what is selected. Do you know of anything I can do to handle this better?
I had my coworker load up a test page with a multi-select box.
It appears that on Android (and likely other smartphones) the multi-select elements will only display the first value, since tapping on it brings up (on Android anyways) a dialog to select the elements.
Even using CSS height doesn't change the appearance.