Skip Navigation

[Closed] Search functionality on mobile

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 1 month, 2 weeks ago.

Assigned support staff: Christian Cox.

Author
Posts
#2091205

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

#2091915

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

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.

The topic ‘[Closed] Search functionality on mobile’ is closed to new replies.