Clicking Checkboxes via Label on iPad « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

UniverseNZ
Member

So, I'm building forms specifically for use on the iPad - and I noticed that clicking the labels just simply doesn't work in Mobile Safari but works in various other browsers like Chrome, Firefox etc.

This is a major pain as on the iPad 3 it is especially tricky to select a checkbox.

Through further research I've discovered clicking of "text labels" is disabled because priority is given to the "Copy+Paste" function on the iPad or something to that degree.

Interestingly, an 'odd' solution surfaced here..
http://stackoverflow.com/questions/4142520/label-not-clickable-in-jqtouch

Where an alternative to using JS was suggested.

"There is an obscure trick for this, using CSS:
label { cursor: pointer; }
And it will work on iPhone and iPad."

Is this true? If so - we need a new setting in GF to enable this on forms designed for use on the iPad asap.

Any suggestions on how I can implement this in the mean time to display on all check boxes?

Posted 12 years ago on Sunday August 5, 2012 | Permalink
David Peralty

You should be able to add any CSS for this kind of thing to your style.css for your theme. I'll let the development team know about this (they are all Apple users, and have probably experienced this themselves, though tablet browsers are difficult and finicky to test sometimes.

Posted 12 years ago on Sunday August 5, 2012 | Permalink
UniverseNZ
Member

Any chance of a solution for this? Doesn't seem to work but I think there may be a conflict. It's incredibly difficult to troubleshoot issues on the iPad because it doesn't any sort of Firebug / Inspect option that I know of.

Help would be appreciated. Seems we live in totally different timezones!

Posted 12 years ago on Monday August 6, 2012 | Permalink
Chris Hajer
Key Master
I think you want to add this to your theme's stylesheet to target that rule for mobile Safari on the iPad .
```
[css]
body .safari .iphone .gform_body label {
    cursor: pointer;
}
```
(I don't have an iPad to test with, but I spoofed my user-agent to this. I believe this is correct for Mobile Safari on the iPad, and I believe Gravity Forms will add iPhone and Safari to the body class):
```
Mozilla/5.0(iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5
```
You'll have to try that out and let us know how it goes. Please provide a link to your site online if you do attempt this. I will try to find an iPad to test with.
Posted 12 years ago on Tuesday August 7, 2012 | Permalink
UniverseNZ
Member

Hey Chris, thanks for your help. Unfortunately this hasn't worked.

What file and line can I find the function which renders the following part in a form:

<input name="choice_2" type="checkbox"><label for="choice_2">This is my checkbox</label>

I want to modify this section so that the label includes an onclick event. Apparently that is another alternative.

Thanks!

Posted 12 years ago on Tuesday August 7, 2012 | Permalink
Chris Hajer
Key Master

I'm not sure where that is created. You can have a look through the PHP of the plugin files. I can't recommend modifying the plugin files. Surely there's another way to add your onclick event to the form page without resorting to modifying the plugin files?

Posted 12 years ago on Tuesday August 7, 2012 | Permalink
Carl Hancock
Administrator

You can attach onClick events using hooks and jQuery if you absolutely have to do this. It should be able to be done using pure jQuery with no PHP... here's a StackOverflow thread discussing something similar (although it related to radio buttons):

http://stackoverflow.com/questions/1161206/jquery-add-click-event-to-radio-input-text

You should never edit the core Gravity Forms files, all customizations should be implemented using hooks, filters and jQuery. Once you start editing the core plugin files, it's difficult for us to provide support for the core plugin because any code edits could cause issues.

Another thing to note is iOS 6 resolves this issue. I have the developer beta installed on my iPad and my iPhone 4S and i'm able to click on the label to select a checkbox.

iO6 will be released in September or October and iOS version adoption is extremely high so there are usually no issues of having to worry about supporting legacy versions of that OS.

Posted 12 years ago on Tuesday August 7, 2012 | Permalink
UniverseNZ
Member

Thanks for the link. In a corporate operating environment updates are not normally encouraged because it can break compatibility with custom apps. So whilst this may be fixed in iOS6 (thank god) it's not going to mean that the intended users of these forms will be using iOS6 for at least the next 6-12 months.

Where possible I too would like to avoid editing any GF files.. so thanks for the JQuery link.

I'll let you know how I get on.

Posted 12 years ago on Tuesday August 7, 2012 | Permalink
Chris Hajer
Key Master

Please do update us when you have something that works.

Posted 12 years ago on Wednesday August 8, 2012 | Permalink
UniverseNZ
Member

Hey Chris, just an update. I gave up trying to get this working because nothing I seemed to try was working.. It turns out it's not such a big deal to click checkboxes on an iPad 1 or 2, where the screen resolution is still reasonably low. As opposed to it being almost impossible on the iPad 3 which is what I was testing with.

Since the target demographic for these forms will be using iPad 2 hardware, it looks like I've been granted some leeway until iOS6 is rolled out and the issue is resolved once and for all.

Thanks for your help nonetheless!

Posted 12 years ago on Thursday August 9, 2012 | Permalink

This topic has been resolved and has been closed to new replies.