Is it possible for a select menu to open a spinner with two columns in iOS? Similar to how when you have an input type of date iOS opens its customised spinner with different columns that are all individually selectable.
Sorry should have specified "in HTML"
Not using native controls, no. There are a few libraries for this already available mind you:
http://cubiq.org/dropbox/sw/ is a good example of one that mimics the iOS interface.
Related
I have a web application with an upload form.
<input type="file" name="c_files[]" id="c_files" multiple="multiple" />
I can select and upload mutliple files from the gallery but can't make multiple photos from the camera app. Taking the photos first and then uploading them from the gallery is not a good way to go.
I'm using Google Chrome Version 92.0.4515.159 on Android 11.
Firefox for Android and Safari on iOS isn't working either.
Apparently I have to use javascript right or is their an exisiting work around?
There is no such thing as "Out of the Box" that will solve your problem or your scenario, and the truth is that not HTML have at least one way to get there.
But... we have javascript I can think of something that is not exactly what you are looking for but it would be the way to perform this feat:
detect that you are on a mobile device.
allow that if you are on a mobile device when you click on the file field, you directly invoke the camera APP and take multiple photos.
when returning to the form detect the event and make the programmatic trigger of the multiple input type file, but directly open the image gallery...
select multiple images to attach.
As you can see, this is a concept/solution based on the capabilities that we know the mobile environment and the javascript language have. regardless of HTML.
To achieve this you must get each point mentioned above to work.
My code is very simple:
<input type="date">
While I run it in Firefox and Chrome I get two different designs:
Firefox:
Chrome:
Not only design is different, but the functionality also little bit different. In Mozilla when I click inside the date box it will show date, but in Chrome if we want date box we should click on drop down arrow symbol.
Is there any way to change the functionality and design so that it works and looks the same in both browsers?
It is different from one browser to another. However end result will be added values to the input field.
The control's UI varies in general from browser to browser
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Customized DatePicker
If you need this field should act same as every browser, please use a custom Javascript generated date picker.
https://jqueryui.com/datepicker/
18+ Best Free Date Pickers In Pure JavaScript And CSS - CSS Script
https://fengyuanchen.github.io/datepicker/
Is there a way to create an ios datepicker/timepicker like styled custom select for ionic apps?
For example, I want to create a custom select as the following image
This is kind of late to the party, but maybe this will help: https://github.com/mmnaseri/proton.multi-list-picker
This is an Angular 1.x component with no dependencies on any other frameworks that provides an easy solution for creating iOS-style select views.
For instance, this is the sort of select that you can create with this component:
And this is another example:
If you set the attachment value to bottom it will be exactly like the iOS select component looks like, with a fixed bottom modal attachment.
I'm not sure but for now this not possible with Ionic. There options like this ionic-datepicker, but this isn't native, just a library.
There are various plugins available out there. You can find one here
Also you can use HTML Select/Option list to show up a native alike control that will display a list of single select-able items. Select/Option tag invokes OS specific native selector.
Have a look at it here. That demo might help you.
I want to change the default buttons of an HTML select box (dropdown) using PhoneGap 3.5. A "Cancel" button should appear in addition to "Done." Is it possible to change or add select buttons using the PhoneGap API or plugins?
It's not possible using the OS level control out of the box but it looks like a cordova plugin (for iOS) has been started (3 days ago) that could include this functionality:
https://github.com/mzbyszynski/cordova-plugin-picker
I suggest speaking directly with the plugin author by raising an issue / enhancement request.
How can I let the user reorder the rows of a list in a flex mobile app?
You know, you see it a lot in native iOS apps. Usually you hit an Edit button at the top of a list view. Each row then gets a thumb icon that lets you move the rows around in the list.
This might be totally obvious, but I'm writing my first mobile app in flex and can't seem to find an example anywhere.
Cheers.
Spark List control supports Drag and Drop, besides dragging and dropping with the list itself, you can also do so between two different list controls. To enable the feature, you could set dragEnabled, dragMoveEnabled, dropEnabled properties to true, more details may be found in this help document.
To enable the feature as you described, you could set those drag and drop properties to true when the edit mode is enabled. Optionally, you could also display a drag handler (as decorator).
Update: For mobile application, there is a write-up on how to get around with mobile limitation of drag-and-drop.