CSS Checkbox Problem in Template Toaster Theme

Hello @candlelite ,

Please check this CSS:

.forminator-checkbox .ttr_checkbox,
.forminator-radio .ttr_radio {
    margin-right: -14px;
}

Add it to Appearance -> Customize -> Addtional CSS.

kind regards,
Kasia

Hello Kasia

Many thanks for reply. I have added the CSS as advised (please check the page) and this has moved the checkboxes to the left which has hidden the “ticks” but now you can not see which checkboxes have been selected. You only know that a selection has been made by the fact that the Number of Pay-As-You-Go Classes calculation field increments.
When checking the form using the Preview button in the back end the checkboxes display correctly in the pop out window which proves that there is a CSS clash when displayed in the front end on a webpage.

Regards

Hi @candlelite

Thanks for response!

Could you try something slightly different instead then, please?

Try removing the CSS that Kasia provided and instead add this one:

.forminator-checkbox span[aria-hidden="true"] {
  display:none!important;
}

This might look different (not good) in preview but it seems to be fixing the issue on front-end when tested through browser CSS editor.

Best regards,
Adam

Hi Adam

Many thanks for your efforts to resolve this problem, however this update does not seem to do anything – not even in Preview.

Regards

Hi @candlelite

I’ve tested this code by disabling Kasia’s code and adding mine directly via browser (so such change isn’t permanent and only applies to my browser) and it seemed to work fine there.

I don’t see that code anywhere on your site though. Did you make sure to remove that previous code first and added mine to Appearance -> customize -> Additional CSS rather than to a custom CSS code option in Forminator and if there’s any cache on site/server, did you clear it after adding the code?

I just want to make sure that nothing was missed here ??

Best regards,
Adam

Adam – apologies – I had cut and copied the code but did not click publish – duh!!
The code is now active. As you will see in the front end I have the small tick boxes but now I am unable to select any of the options. In the back end the form is working fine in the pop out preview.
Regards

Hi @candlelite

I hope you are doing well.

I was able to click and select, but I needed to click the words.

https://monosnap.com/file/DTC0gqWv4av2x8b9gRjQCgKNon5kkx

Aren’t you able to select clicking on it?

If so, could you let us know the browser that you are using and we can try to replicate?

Best Regards
Patrick Freitas

Hi Patrick
I was clicking on the tick box. I have now tested the page in Chrome, Firefox and Edge and as you rightly say if you click on the words it works in all three browsers. To make it more intuitive is it possible to make the words appear like a link. I tried to wrap them in ‘a’ tags but of course that did not work.
REgards

Hello @candlelite ,

Can you replace last code:

.forminator-checkbox span[aria-hidden="true"] {
  display:none!important;
}

with this one:

.forminator-checkbox span[aria-hidden="true"] {
opacity: 0;
margin-left: -18px;
}

kind regards,
Kasia

Kasia – many thanks – problem solved. If I now click on the tick box or on the text then I get an indication that the option has been selected.
Once again many thanks to you all.
Regards

Hi @candlelite,

Glad to hear that did the trick ??

I will mark this ticket as resolved but if you have any followup questions feel free to reopen it.

Cheers,
Predrag