[Resolved] Cannot display content templates correctly

[Author]

Posts

[ericW-5]

Hi,

I am building a job site where agencies can have their own "showcase page" and can modify it via an edit form.
Unfortunately the content template showing the showcase page and the content template showing the edit form are not always displayed correctly.

Here is the content template for the showcase page :
hidden link
Here is the content template to display the edit form :
hidden link

I give you an access so that you can check :
Access to your account dashboard : hidden link
in your dashboard you will see a liste of 2 showcase pages : if you click on the page name you will see the showcase page, and if you click on the link "modifier la vitrine" you will see the edit form.

The problem is these 2 items (showcase page + edit form) are displayed sometimes correctly and sometimes not correctly. I have dozens of showcase pages and there is no rule... sometimes its fine, sometimes not.

In your account dashboard I give you access to MON AGENCE EXEMPLE and WEBGOESON pages so that you can see the differences
For example simply compare these 2 items in your dashboard
- MON AGENCE EXEMPLE page is displayed correctly, but the edit form linked to it is truncated
- WEBGOESON page is not displayed correctly (several elements missing), and the edit form linked 2to it is displayed correctly

Many thanks in advance

[Beda]

The templates are a little too large to determine if any block in it causes this difference.

I need to suggest a few things first:

1. Toolset only integrates the Classic Divi Builder (https://toolset.com/documentation/recommended-themes/toolset-divi-integration/). Please disabled the Latest Divi Builder Experience and enable Classic, then re-edit and re-save your templates.
2. Then try to save the posts that are "wrong" in the WordPress backend. I assume you create some of those posts with Toolset Forms, and others with the WordPress backend, which could explain the differences (It seems, some CSS and settings do not load on some posts).
3. I am also pretty sure, some posts have another Theme setting applied (such as full-width versus non-full-width), or even a Divi Global could apply on some. Again this could be shown by re-saving both posts in the WordPress backend using the same theme settings.
4. Finally, try to create 2 completely new posts in the backend, and compare them. My intuition tells me this solves the issue; hence, as the next step create some posts with Toolset Forms (if you do use it) and check those.
Here my intuition tells me, those do look wrong.

If all of the above brings you no further:
-please, could you try to remember if this started happening all of a sudden?
Again, my intuition would say "since Divi 4.0", but I may be wrong
- If possible update me with the as-precise-as-possible moment when all of this started

Also, it can and would be helpful to know if this happens without other Plugins but Toolset.

Please also acknowledge that Toolset does not support the "Theme Builder" of Divi, and it does cause some issues if used together with the Theme Builder.
We are working with Divi on the (known) issues to solve some problems eventually. However, we won't integrate with the New Divi Builder experience or Theme Builder anytime soon.
If you wish such integrations to take place, you'd have to ask for them here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/ and at Divi's Support Forum as well.

Let me know what you can find with the above steps.
Worse come worse I'll need a Duplicate of the site to strip it down to minimal settings and content locally so that I can find the core cause to these styling issues.

[ericW-5]

Hi Beda,
many thanks for your message.

I disabled the Latest Divi Builder Experience and enabled Classic, then re-edited and re-saved templates.
My problem is now solved for showcase pages. Fine. I also re-saved the wrong posts and created new posts.

But the problem remains for the content template to edit posts. It started to work correctly but after some time (like 4th modification) the display again was truncated. Basically I think each time I save the form and I save the content template, it works again... but afeter several times I modify the CPT then the 'edit form' is again truncated.

The issue did not start with Divi 4.x, I already noticed it a few days ago under Divi 3.x and I updated all themes and plugins in order to solve the issue... with no success.

Many thanks in advance
Eric

[Beda]

OK, this sounds like some cache issue in this case.
Please also acknowledge that there are several Bugs with that Feature that are not (yet) solved:
https://toolset.com/errata/the-post-title-theme-setting-in-content-templates-is-not-working-for-the-divi-theme/
https://toolset.com/errata/paragraph-tag-is-stripped-in-wysiwyg-loop-items-and-page-builders-generated-content/
https://toolset.com/errata/the-full-width-option-from-divi-is-not-applied-to-posts-that-use-a-given-content-template-when-created-with-cred/

While all those will affect your Content Templates, none of those seems to be the precise issue you mention.

Could I, therefore, ask for a duplicate of the site?
You can use this instruction here to create one: https://toolset.com/faq/provide-supporters-copy-site/

I can then deploy that locally and skin the website down to the minimal parts, and hopefully, even find the precise steps required to replicate this problem.
I will then escalate it to the Developers for a fix.

I've enabled the private form again for the Duplicate being provided privately.

[Beda]

You are using a Divi Child Theme, and Toolset does not support the Child Themes, under circumstances, because there can be countless code or other things added that can and will break the integration.
See these tickets for reference:
https://toolset.com/forums/topic/custom-posts-content-template-is-not-shown-in-fullwidth
https://toolset.com/forums/topic/theme-specific-settings-divi-for-content-template
They all use Child Themes and the things do not work properly.

Here is the erratum for it:
https://toolset.com/errata/content-template-theme-settings-are-not-working-when-using-a-divi-child-theme/

Unfortunately, we do not support or debug custom child themes.
https://toolset.com/toolset-support-policy/

You will see that simply activating the original, Divi theme, will resolve the issues.

Thanks!

[ericW-5]

Switched to Divi Theme.
Now running some tests.
Will let you know soon

Thanks

[Beda]

Thanks. Please let me know if this resolved the issue for you as well.

[ericW-5]

Hi Beda,

unfortunatly I ran some tests and I still have the same issue.

Thanks in advance for your help

Regards
Eric

[Beda]

You mean you have the same issue using the (genuine) Divi Theme?
Then there must be some difference to the duplicate I received as there, the issue is immediately solved as soon the "real" Divi Theme is used.

Can you provide me with a package of the current site as you have it, with the parent Divi theme, so I can test again?
I reactivated a private reply.

Please acknowledge that I will be off for some days - and Nigel or Mohammed will take over here in case it's needed.

[Beda]

Hello Eric, I apologise you did not receive any help during my Holidays.
My colleagues must have missed this ticket.

I think I found another ticket that sounds at least similar to what you describe:
https://toolset.com/forums/topic/divi-css-settings-being-overridden/

I downloaded the new duplicate, but can't deploy it as it generates a network error and can't be accessed after going thru the duplicator steps.

I can see the issue here on your online site:
hidden link
As opposed to hidden link, it shows in full width and details are missing.

I saw your CSS in Divi is addressing native Bootstrap Classes, like .container, in its width (so that could cause conflicts). That same HTML is used by the posts in the front end, and it seems to conflict.
That would also explain why I had no issues with a "fresh" Divi theme.

I notice you load Toolset's Bootstrap, with " Toolset should load Bootstrap 3", in the Toolset Settings.

However, that should be disabled with Toolset and Divi:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/

Later, you'll add some required styles back manually:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#add-styling-for-main-form-elements-and-filter-controls

I think the issue should actually disappear as soon you remove the CSS from the Theme's options, is that correct?
This would confirm what I suspect above.

[ericW-5]

Hi Beda,
first of all I wish you a happy new year !

I changed the settings to 'this site does not use bootstrap css',
I also disabled css lines in the divi theme's options which could create a conflict (.container).

Unfortunately the problem remains.

Many thanks in advance for your help
Eric

[Beda]

Thank you, and I wish a Happy New Year to you as well!

I do see a change now on the wesbite:
Both links look precisely the same, see hidden link and hidden link, there is no more full-width layout but much of the form is missing.

That could be due to HTML within the form itself (maybe a missing closing tag) or CSS within the form, as well.
You have some "display:none" rules in there which I am not sure if they affect exactly the parts we are missing (I did not dissect the entire HTML of the form yet)

But I rather suspect it's the et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light DIV, as seen in the Google Chrome inspect tool, which hides the form behind it.
I demonstrate this on the Screenshot attached.
The nested et_pb_text_inner, which holds the form, does have the correct height and the entire form in it, but it's hidden behind et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light

There's a max-height: 300px applied to .et-db #et-boc .et-l .et_pb_text_0, so that is why it hides the form behind itself.
There is another max-height: 250px; applied to et_pb_section et_pb_section_0 et_section_regular DIV.

These 2 hide the form.

These styles all come directly from hidden link

Hence, that explains why I did not see this anymore locally after dissecting and rebuilding the site, as the cache or minified CSS wasn't used.

I suggest testing these forms (without Bootstrap as the DOC suggests) and making sure the styles abovementioned are not applying.
These styles seem generated by the Divi Theme, minimized and then cached - which then seems to A) conflict with the Form itself as not displayed and B) most likely, avoid changes made to the CSS to have immediate effect and likely only after saving (as cache would/should be flushed).

Does your Divi website use a cache and minimization of styles?
I would suggest starting with disabling that, in order to confirm, the issue is then solved as the inspection shows above.

Please let me know if not.