Hi support 🙂
I've created a search in a toolset view, I've put the search part in an overlay that can be opened from anywhere, there's a red floating button in the right side of the window. hidden link
This works on mobile, but it's not easy to use or scroll through. How do we create a mobile friendly search in a Toolset search form?
E.g. the wheel that shows up on an iPhone if you click a select box
The same goes for fields from Toolset Forms, how do we show number keyboard in a phone field, and date selector in a birthday field?
Thanks and kind regards
Lykke
How do we create a mobile friendly search in a Toolset search form?
E.g. the wheel that shows up on an iPhone if you click a select box
Hello, the wheel that shows up on an iPhone for select elements is the built-in way iOS displays select elements. There's nothing special that needs to be done to display a select input like that, it just works that way by default in the iOS operating system. There's nothing similar that will improve the display of a group of checkboxes by default, unfortunately, in iOS. I think you could use media query CSS to adjust the spacing, line height, and arrangements of the checkbox groups a bit on mobile devices to make them easier to read and "check", but there's nothing simple built-in to Toolset that will automatically improve this experience much. It's more of a custom design solution that requires some level of CSS experience.
The same goes for fields from Toolset Forms, how do we show number keyboard in a phone field, and date selector in a birthday field?
This is a request that has been filed with our developers but has not yet been implemented. For now, a JavaScript snippet is required to change the input types programmatically. The input type 'number' will show a numeric keyboard, and the input type 'date' will show the device datepicker, if available. Toolset's date fields will display a custom datepicker interface, but if you have a plain text field for birthdate, you could apply a different input type programmatically. For example, this JavaScript code applied in the Form builder's JS editor will change the input type of a numeric custom field to a number keyboard input, and will change the input type of a text field to the native datepicker:
jQuery(document).ready(function(){
jQuery('input[name="wpcf-numberfieldslug"]').attr('type','number');
jQuery('input[name="wpcf-textfieldslug"]').attr('type','date');
});
You would replace numberfieldslug or textfieldslug with the slug of the custom field you want to display using a custom input type.
