-
Posts
-
Hi,
I use the WPEverest form builder with no issues on other sites. On my site using Enfold, my checkboxes and radio buttons are being overridden by the Enfold theme. Is there something I can add to the quick css to get these to look and function correctly?
Thanks in advance for any pointers.
Hey freestatealarmcompany,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top input[type=checkbox].input-text { width: 14px !important; margin: 0 10px 0 0 !important; }Then clear your browser cache and your plugin autoptimize and check.
Best regards,
MikeActually, that made it look like a short textbox but no working checkbox. I added to your CSS and this fixed it. The “submit” button is also not appearing, maybe you can guide me as to work around that? Would you be able to help with either removing all custom css from the form button or better, I can assign the form button a CSS class so maybe it will appear and look like the Enfold buttons but I don’t know what that class is.
As for the original question, here is what fixed the checkboxes and radio buttons for me (would you mind letting me know if I’m missing something critical?):
input[type=”checkbox”] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important;
}#top input[type=checkbox].input-text {
width: 14px !important;
margin: 0 10px 0 0 !important;
}input[type=”radio”] {
-webkit-appearance: radio !important;
-moz-appearance: radio !important;
-ms-appearance: radio !important;
-o-appearance: radio !important;
appearance: radio !important;
}#top input[type=radio].input-text {
width: 14px !important;
margin: 0 10px 0 0 !important;
}Hi,
Glad we were able to help, your adding of appearance seems to be working good 👍
As for the everest form css, most all of the elements have well-defined custom classes and a form container ID so it should be working fine. But I see that you are using the autoptimize plugin which seems to be serving different versions of the rules from different saves mixed together, I recommend disabling it and your Enfold Theme Options > Performance > JS & CSS file merging and compression and any other caching plugin, and then clearing all of them, and then once your edits and adjustments are done you can rebuild your cache. Another option is to copy your plugin’s css and add it to the WordPress > Customize > Additional CSS field so it will have priority, naturally you should test this with autoptimize disabled and then enable it to see if it still works.Best regards,
MikeDear enfold support,
I am experiencing the same issues with Everest form builder and Enfold regarding the checkboxes.
I find the suggestions above quite laborious to be honest for fixing an issue occurring on two premium products. As you said the everest form CSS has well-defined classes and I don’t understand why they are beeing overwritten.
I have attached the URL of the form (work in progress) in the private content field. The error is visible in the second step “first choice”, “second choice” & “third choice” should be checkboxes.Please help me to fix it. Thanks a lot in advance.
PeterA tried and tested means of circumventing the definitions determined by the browsers is not to display the checkbox itself (opacity: 0) but to build a substitute in the form of a pseudo-container.
you can see two examples in the contact-form : https://webers-testseite.de/kontakt/
I am sorry but I don’t really know how this can help me.
As I understood the only option to make it work is to literally add the CSS from the Everest form plugin somewhere?Is this really just a CSS issue and the functionality of the form is guaranteed?
Why is this only happening with enfold though? I have been using Everest on other sites – no issues at all.Hi,
Thank you for your patience, and the link to your site but I don’t believe that I’m seeing what you originally intended, perhaps you have changed the layout?
Please see the screenshot in the Private Content area of what I’m seeing in step two, the radio buttons look at work correctly for me on Windows 10 in Chrome.
As I recall with this plugin some of the styles have a lower specificity than what the Enfold form elements use, for example our rules begin with an ID #top and the Everest form builder doesn’t use any IDs, so if you have a rule that is being overwritten you could copy it to your custom css and add the ID #top to the beginning.Best regards,
Mike
- You must be logged in to reply to this topic.