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.

Radio Buttons Not Displaying

  1. I have an issue with the radio buttons. please see here http://thingk.co.nz/yourtaxback/tax-refund-application/ .The options are there but not the actual radio button, have searched forums with no luck! please help.

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  2. You have something that is writing in and trying to do a replace of the radio buttons, most likely from your theme or another plugin with some javascript, see this screenshot:

    http://grab.by/cj6O

    Something is adding in span tags around the input, as well as setting the opacity to 0 via an inline style.

    You can test for theme/plugin conflicts to try to narrow it down:

    http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  3. This is the deal.. it's not a plugin conflict, it's coming directly from your theme files. Your theme is using the "uniform" js script library to replace the default form controls with images. You can find this script added on line 4 of this library file.

    http://thingk.co.nz/yourtaxback/wp-content/themes/yourtaxback/js/libraries.js

    So, it's using jQuery and slight of hand to hide the controls and allow you to replace them with pretty background images. It appears the background images aren't being loaded properly so you've probably got an incorrect image path defined in your CSS somewhere or else the images are not on the server. You'll need to check that out if you want to keep that functionality.

    This isn't a Gravity Forms specific issue, so you'll want to go to your theme developer for additional guidance if you can't make the script work/display the form controls as intended.

    Good luck with it.

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  4. Richard Vav
    Administrator

    As Rob has pointed out your problem is being caused by a script trying to replace your radio buttons, after examining a couple of your themes js files I have narrowed it down to the uniform plugin contained in your themes libraries.js file and the corresponding styles contained in button.css

    The uniform plugin masks standard form inputs with custom themed inputs by injecting and modifying the html code as the page loads which is why you have extra span tags surrounding the radio inputs and why they have been hidden.

    From what I can tell though it looks like the job isn't being done properly for the radio buttons, yet it is for the check boxes. It looks like there may be a couple of styles missing from button.css because the following styles are all adjusting the background image that is supposed to form your radio button but I can't find a rule that is setting the background image. You need to speak to whoever created your theme and find out why that is missing.

    div.radio span {
      height: 18px;
      width: 18px;
      background-position: 0 -279px;
    }
    
    div.radio:active span, div.radio.active span {
      background-position: -18px -279px;
    }
    
    div.radio.focus span, div.radio:hover span {
      background-position: -36px -279px;
    }
    
    div.radio.focus:active span, div.radio:active:hover span, div.radio.active:hover span, div.radio.active.focus span {
      background-position: -54px -279px;
    }
    
    div.radio span.checked {
      background-position: -72px -279px;
    }
    
    div.radio:active span.checked, div.radio.active span.checked {
      background-position: -90px -279px;
    }
    
    div.radio.focus span.checked, div.radio:hover span.checked {
      background-position: -108px -279px;
    }
    
    div.radio.focus:active span.checked, div.radio:hover:active span.checked, div.radio.focus.active span.checked, div.radio.active:hover span.checked {
      background-position: -126px -279px;
    }
    
    div.radio.disabled span, div.radio.disabled:active span, div.radio.disabled.active span {
      background-position: -144px -279px;
    }
    
    div.radio.disabled span.checked, div.radio.disabled:active span.checked, div.radio.disabled.active span.checked {
      background-position: -162px -279px;
    }
    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  5. Hi Guys, thank you for your feedback. Getting help from the theme author will be like getting blood out of a stone! But at least I know where the problem is and can enlist some outside help.

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  6. Hi I disable the button.css stylesheet and the radio buttons are still affected. Are you sure this is what is causing the issue?

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  7. It's the uniform script in http://thingk.co.nz/yourtaxback/wp-content/themes/yourtaxback/js/libraries.js

    It's adding in span tags around the input, as well as setting the opacity to 0 via an inline style. http://grab.by/cj6O

    You could just axe that piece of the js file if you wanted.

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  8. Richard Vav
    Administrator

    The button.css style sheet is part of the problem, the uniform plugin that is injecting the extra code and hiding the gravity forms radio buttons is the second function in the libraries.js file

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  9. I also found this pice of code which has the opcity set to 0.

    <input id="choice_46_0" type="radio" onclick="gf_apply_rules(1,[22]);" tabindex="29" value="Yes" name="input_46" style="opacity: 0;">

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  10. Richard Vav
    Administrator

    It's the uniform script from the libraries.js file that is injecting the opacity:0 style. If you comment out or remove the second function from that file and then try viewing the form the standard radio buttons should now be visible

    Posted 12 years ago on Sunday March 11, 2012 | Permalink
  11. Yeah, I'm pretty sure I said it was the uniform js scripting that was causing the problem way back in this thread… Hello.. is this thing on? :)

    Posted 12 years ago on Monday March 12, 2012 | Permalink
  12. Hi Guys I appreciate your help on this, but you are dealing with someone who has little knowledge on this stuff.

    Can you please advise on what piece of code exactly I need to comment out or replace? :)

    Also see here the buttons display correctly when I preview the form http://thingk.co.nz/yourtaxback/wp-content/uploads/2012/03/Picture-4.png don't know if this helps you.

    Posted 12 years ago on Monday March 12, 2012 | Permalink
  13. Richard Vav
    Administrator

    Hi Zealand, If you open the libraries.js file which you will find in your themes js folder, first of all I would save a backup of the file then if you look in the file you should find the following line

    /*! http://github.com/pixelmatrix/uniform */

    This line is the comment that marks the start of the uniform script, it ends with an empty line before the comment that marks the start of the next un-related script like so

    /*
     * 	Easy Slider 1.7 - jQuery plugin

    Because you have made a backup of the file you can now safely remove all the code that is between those two comments I have shown you above including the first comment. Once you have done that you can then check your form.

    The reason the radio buttons display correctly on the admin side form preview, is that your themes styles and scripts aren't being loaded, only the default gravity forms css and scripts are loaded in the form preview.

    Posted 12 years ago on Monday March 12, 2012 | Permalink