-
Posts
-
Hi,
I have a plugin installed called eForm.
Everything mostly works fine excpet when I enter the shortcode on to various pages, the layout starts having problems causing the icons and font on the form to over lap each other.
I have been in touch with eForm support and they are telling me that its an issue with the Theme.
Please see the link attached below for a page with the issue.
If i view a form directly without embedding it on to a page then its absolutly fine. See link below.
Please can you let me know what is causing the issue.
Many Thanks, Lewis
Just wanted to let you know that another plugin is having a layout issue as well becuase of the theme. Link in private section.
Hi,
I can’t see any overlapping on my end, could you let us know how to reproduce this problem please?
I have been in touch with eForm support and they are telling me that its an issue with the Theme.
Did they specify what exactly is wrong with our code? If so then please share the problem code with us, so that we can fix it.
Best regards,
RikardHi Rikard,
Have you visited all the links I have sent you above?
I will attached some screen shots for you view a link.
eForm didn’t say what the issue was excpet to get in contact with the theme develpes.
You will see the new starter form appears correctly when not embedded in a page/layout etc, just accessed through a direct link through eform.
You will see CV upload, this uses a shortcode in the page setup and appears incorectly, overlapping text and icons.
Job Search (not eform) but same issue when embedded onto a page, layout is squished.
Hi,
Try this in Quick CSS:
#ipt_fsqm_form_wrap_93 input { padding: 25px 0 10px 10px; }Best regards,
RikardHi,
Sorry for the very late reply, I looked at your CV upload page and the icons and label in the input fields, and to me, they look like they would be hidden with css or js on input action, they do not look like they should be below the input fields. If that is the case then the error I’m seeing in the browser console:
0d532.js:2 Uncaught TypeError: i(...).chosen is not a function
could be related.
Please try disabling all caching & minifying and follow this step, and ensure your theme option Enfold Theme Options > Performance > Load jQuery in your footer is not active, and then check.
Is there a plugin demo page for this CV upload? I’d like to see how the demo performs.Best regards,
MikeHi Mike. Is there a best/safe way of diabling W3 Total Cache?
I checked Load jQuery and this isnt active.
Plugin demo page – https://eform.live/
Hi,
Thanks for linking to the demo site, from the examples when you click in the input field the “placeholder” text is moved to the top of the field with javascript. So it makes sense that your javascript error is preventing this animation from occuring. Currently your site is still serving cached files, please try disabling all of your caching and minifying, there is a good chance that your caching is serving the error.
In my experience with W3, simply disabling it on the plugin page works well, then when it is re-enabled it will remember it’s settings.Best regards,
MikeHi Mike,
Still having issues with this.
I have attached a link to a photo.
If I view the form directly it appears fine, as soon as I put the short-code onto a page that’s when I have a problem.
Hi,
Do you have new pages to show the issue? The two pages you linked to a while back both are working for me now, but I do note a few javascript errors in the browser console, please see the screenshot in the Private Content area.
For the console errors, I note that it looks like you have the W3 cache enabled and you have the Enfold Theme Options > Performance > JS & CSS file merging and compression enabled and I believe you also have the Enfold Theme Options > Performance > Load jQuery in your footer option enabled. Please disable all of these, while this should help with the console errors, I still don’t see the input field placeholder error on the two pages linked to.Best regards,
MikeHi Mike,
By turning all the above off, won’t this slow the website down massively?
Please view the following pages attached below for errors. All pages have text/icons overlapping. Maybe try typing in the fields.
Thanks, Lewis
Hi,
Thank you for your patience, in comparing these pages and the un-minified css I found that the plugin css is being overwritten by the theme css because of css specificity, to correct this we can give the plugin a higher specificity by adding two IDs to the rules, for example, currently the plugin css is this:.ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > inputbut adding two IDs before the rule will give it more specificity:#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > input, so you could edit the plugin stylesheet and add the two IDs to every rule and this would solve all of your current and future issues, or you could add this css to your current custom stylesheet which would solve the issues that I see on the two pages that you have linked to:#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field > label.active { -webkit-transform: translateY(-150%); transform: translateY(-150%) } #top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > input,#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > textarea,#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > label,#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > .validate ~ label,#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > .autocomplete-content { padding-left: 2.5em; margin-left: 0; width: calc(100% - 3em) } #top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > input,#top #main .ipt-uif-custom-material-custom.eform-override-element-boxy .input-field.has-icon > textarea { width: calc(100% - 3em - 2px) }then if you find any future issues with other elements in your forms you will know to follow the same procedure with the css rules for that element.
Please don’t forget to clear your browser cache before checking.Best regards,
MikeHi Mike,
Thanks for getting back to me.
For the moment I have added the css above. While this is much better its still not correct.
Im not too sure where the Styles sheet is for the plugin – I have passed your comments onto the plugin developer.
Also, there seem to be some css issues with this page ( see jobs – in private content) – I am using WPJOB Manager Plugin. Again I believe the theme might be overriding.
And this page ( see dflip – in private content) when looking at the first page in the form the flip book appear, when entering your name and clicking a date on the calendar and moving to the next tab the flip book doesn’t load with the page – Seems to be theme related as I have found this on support from the plugin developer. Also seems the first page flip book isn’t loading. If I press the Zoom buttons I can then see the content.
The problem is occurring due to code execution interference caused by an error in a Javascript code file from the theme.
You can be certain by changing to another theme temporarily.
I would suggest reporting this error to the theme developer. This issue is due to the usage of depreciated code from jQuery.Uncaught TypeError: Cannot read property ‘msie’ of undefined
at WPEXMasonry (global.js?ver=1.0:44)
at global.js?ver=1.0:137Hi,
I’m glad that this has helped and placed you on the right track I recommend that you continue along with the plugin developer. But supporting third-party plugins such as this is beyond our intended support scope.Best regards,
MikeHi Mike,
Regarding the other issues I posted above I thought this might also be related to a similar issue with permission etc as I Believe its the theme causing these issues?
Thanks, Lewis
Hi Mike,
Do you know where the style sheets is for eform so I can fix this issue? The developers and looking into this but looks like it may take them a while ….
With the other issues I mention above, it seems like Enfold is causing a few problems with plugins in general and how they should appear. I need to sort this for the whole site in general.
Thanks, Lewis
Hi,
From what I can tell from looking at your source code, the stylesheet that is loading the css in the above modification is located at:/wp-content/uploads/eform-custom-material/form-theme-120.cssBest regards,
MikeHi,
For the page that you have linked to the content looks full width to me with 50px padding on the left and right, but my screen width is 1536px, so I assume that you have a wider screen, in that case you can use this css to assign the width wider. In this example the width is 2000px and the padding is 0px, please adjust to suit.#top.single-job_listing #main > .container_wrap_first > .container { max-width: 2000px; padding: 0; }Please note that typically we request that each support thread is limited to a single issue so that the threads don’t become long and off-topic, so if you find that this css helps with the page width please let us know and we will close this thread and for future questions on new topics you can create a new thread and we will be happy to assist. Thank you for your understanding.
Best regards,
Mike
- You must be logged in to reply to this topic.