PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Clicking Checkboxes via Label on iPad

  1. 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 10 years ago on Sunday August 5, 2012 | Permalink
  2. 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 10 years ago on Sunday August 5, 2012 | Permalink
  3. 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 10 years ago on Monday August 6, 2012 | Permalink
  4. 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 10 years ago on Tuesday August 7, 2012 | Permalink
  5. 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 10 years ago on Tuesday August 7, 2012 | Permalink
  6. 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 10 years ago on Tuesday August 7, 2012 | Permalink
  7. 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 10 years ago on Tuesday August 7, 2012 | Permalink
  8. 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 10 years ago on Tuesday August 7, 2012 | Permalink
  9. Please do update us when you have something that works.

    Posted 10 years ago on Wednesday August 8, 2012 | Permalink
  10. 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 10 years ago on Thursday August 9, 2012 | Permalink

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