Similar to Inline UIPickerView in a table but more focused on React Native and Expo and I am looking at it from the point of view of a tablet.
In React Native Community DateTimePicker it provides an in-line input of a time
However, they don't provide a similar function for non-time based pickers or at least I can't find it. Is such a component not available in iOS because I can't seem to find something that behaves similarly where if you tap to show the picker and it starts editing the "original" disappears and places the field close to where it originally is.
I want it in-line as in a tablet the width is much larger so it does not make sense to do the style as shown in the HIG as it is for a phone form factor.
react-native-dropdown-picker is another one I tried to take a look at but it does not match what I would expect from the OS controls.
Related
I want to use the q-dialog for a form with about 20 inputs. But in the documentation it is told that it should only be used for small quick things.
From a UI perspective, you can think of Dialogs as a type of floating
modal, which covers only a portion of the screen. This means Dialogs
should only be used for quick user actions, like verifying a password,
getting a short App notification or selecting an option or options
quickly.
What should I use instead of Dialog for my modal forms ?
Quasar is a cross-platform framework. Its UI components are meant to be used for desktop and mobile devices. If you put a lot of child UI elements inside a Dialog on mobile devices, it won't fit in screen size and the whole idea of a dialog would fail. Thus, it's better if you make a dedicated view for your form with 20 inputs.
Background/Context:
I am developing touch screen based kiosk application with JavaFX. The app integrates browser – WebView. The problem is that all user inputs have to be made through on screen keyboard (SW keyboard)
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
Even though I searched the Internet, I did not find this kind of feature.
My questions:
Does JavaFX / WebView provides any support for these cases?
If you were to tackle this problem, what would be your approach to that?
My solution so far:
I have a small button (at one corner of the screen) that allows user to show/hide on-screen-keyboard. Since they have to do that manually, it is quite annoying. Especially on sites where browsing (consuming information) and text inputs changes frequently.
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
A potential strategy for doing this:
Start with a jdk8 preview.
Run the application with -Dcom.sun.javafx.isEmbedded=true to enable the virtual keyboard.
Use a webengine.executeScript technique to embed jQuery into the target page.
Bind a jQuery focus handler to the relevant html elements.
In the jQuery focus handler make an Upcall from JavaScript to Java.
Upon receiving the upcall make use of JavaFX's Virtual Keyboard.
As the user enters values into the keyboard, make executeScript calls to set the value of the corresponding html field.
Some parts will likely be a bit (or totally) flaky, but perhaps other parts may prove useful to you.
In the future, if WebView is supported on touchscreen platforms on embedded devices, I'm guessing that out of the box it will work well with a virtual keyboard.
I am using the ListPicker from the toolkit. I have managed to apply a style template so that when the user is selecting from a list of items in fullscreen mode, it looks somewhat similar to the native WP7 implementation.
However, there are a few things missing that appear on the native implementation:
On full mode enter, the items appear via an animation
When at item is selected, it stays highlighted for an instant, then the items disappear via an animation
Am I missing something or is this simply just not exposed to 3rd party developers using silverlight at this point in time?
Animations are provided in November Toolkit. Download the latest version, please
Check the other posts in the same site .. http://www.windowsphonegeek.com/tips/how-to-customize-the-listpicker-selected-item
I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.
To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.
I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.
Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?
Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.
To determine that the keyboard is showing, you can use this solution:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.
If someone has a better hack, I'd really love to hear about it.
For single form UI's the form assistant in the mobile safari virtual keyboard doesn't provide much value and reduces the useable space in the viewport. Is it possible to remove this section of the keyboard for forms that do not benefit from this?
In essence, you must wait till the keyboard responds and then forcibly grab and remove that top bar. It's not pretty and definitely not perfect but it is a starting place. I'll post the refinement of this process as I work on it myself.
Here is the question. I implemented this using Trigger.IO and native plugins but, naturally, you can ignore that and just run it on your UIWebView: How can I hide Form Assistant with iOS native plugins using Trigger.IO?