Gravity Form radio button closes off canvas element when checked

[NicWetzel]

I added an off canvas element on smaller screens and used the for integration to add a gravity form. I have styled the radio buttons to look like actual buttons for each choice. When user makes choice, it closes the off canvas element. I noticed the off canvas adds the x-active class once opened and clicking the radio button removes that class, therefore closing the off canvas. Is there a way to stop this from happening that I am missing?

[nabeel]

Hi @NicWetzel,

Thank you for reaching out to us. To better assist you with the issue please get back to us with the exact URL of the page in question and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[marc_a]

Hey @NicWetzel,

I’ve checked your website, I couldn’t find the radio button. Would you mind sharing more information on how we can replicate it? Providing screenshots or videos is a great help.

Thank you.

[NicWetzel]

It is n the off canvas element on laptop screen sizes and smaller. The Repair/Maintenance and Replacement buttons on the form.

[nabeel]

Hey @NicWetzel,

Your website seems to be down now or is it removed? Can you please double check the URL if it’s working on your end?

Thanks!

[NicWetzel]

It is not down and you should be able to access it now.

[nabeel]

Hi @NicWetzel,

Yes your site is working now, I checked your site and the issue was happening due to the custom code you’ve added to change radio buttons to buttons. I went ahead and made couple of changes to fix the issue. First I commented out the script that is executed on click and then I replaced your CSS code with the following:

 .gform_wrapper .gfield.buttonized input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    appearance: none;
    z-index: 2;
    width: 100%;
    height: 100%;
}

This seems to have fixed the issue. Please note that the code provided above serves as a guide only and is to help you in getting started so maintaining the code will be out of our support scope. If you would like further help with customizations like this or 3rd party plugins, I’d encourage you to subscribe to our One service.

Thanks!

[NicWetzel]

Thank you! That seems to have done the trick. Sorry for the script still being there, I was testing out some things with it and forgot to remove it. Thanks again for the help, I really appreciate your time on the issue!

[prakash_s]

You are most welcome @NicWetzel