Section not showing up in content builder and loss of functionality in browser

[doughballs]

Hi. One of my sections (section 4) won’t show up in the page builder. I’m getting a red loading icon, infinitely spinning, and section 4 is not displaying. The section loads in the browser but the intended functionality and styling are missing.

Directly underneath this section I have a 3 column section with single content modal which is providing the styling and modal functionality, and I have hidden this section to retain the styling and modal function for the numerous content modals inside the the ‘faq’ tab above, in section 4. This was working perfectly until the section failed to display in the page builder.

Note each question inside faq should be a button with white star and uppercase bold black text, and like I mentioned, was working perfectly until it stopped loading in the content builder. Any help appreciated.

[ruenel]

Hello There,

Thanks for writing in! I have inspected your page and the issue occurred because in one of the tab contents or text elements, you have inserted an invalid code. There were unclosed element that causes this issue. I could not locate where exactly you have inserted it. If you could give me access to your site, I might be able to figure it out.

By the way, when some of the sections does not display in the preview area because of broken html codes added, you may be able to access the section, rows, columns or elements using the skeleton mode when editing for faster response and easy access of all the elements in the preview area. This is also helpful especially if one of the sections or elements is not visible or hidden in selected screen size or you may have applied visibility options to a section of element.

Hope this helps.

[doughballs]

Hi @RueNel - I just checked all those tabs, copied and pasted into VS Code and the markup seems fine. I’ll add my login details as a secure note. Cheers, Sean.

[mldarshana]

Hi There @doughballs

Upon investigating your issue further, one of the possible issues that I see is that your PHP memory limit and your PHP max script execution time.

Can you please try increasing your PHP memory limit by following our guide here (https://theme.co/apex/forum/t/troubleshooting-increasing-php-memory-limit/16935).

If you’re still experiencing any issues, try increasing your PHP max script execution time to 120 or a higher value like 300. Currently it is set to 30 seconds. You can follow this article if required (https://www.simplified.guide/php/increase-max-execution-time).

Make sure to purge your server cache and clear your browser cache before testing.

Let us know how it goes.
Thanks!

[doughballs]

Hi. I tried both of those and saw no change. I’m confused though, as initially you said it was a markup error - is this not the case?

Please note, the links you posted are slightly ambiguous in terms of where EXACTLY to place the code. So I took screenshots to show you.

[thai]

Hi There,

It looks like there is an unclosed HTML tag in your tab contents, please review your all tab contents and look for any unclosed HTML tag and close it. This should get things resolved.

I recommend you using this tool to check the HTML code:

https://www.freeformatter.com/html-formatter.html#ad-output

Let us know how it goes!

[doughballs]

@thai thanks, the formatter worked - the section is now appearing, but I still have a major problem - the faqs inside the 2nd tab are not displaying correctly - they should all be clickable buttons, pulling their style from the previously hidden section below it (which I have now made visible), and acting as content modals. This was working fine until the section disappeared, and now this behaviour has been lost. Any ideas?

Lastly, shall I keep the two changes to the PHP that was recommended by @mldarshana?

EDIT: I have now fixed the problem - the issue was the class name of the hidden div, which is providing all the styling for the faqs, had changed from e121-81 to e121-79. I’m not sure why, and I wonder is there a safer way to reference it? Obviously an ID won’t work, because I have numerous faqs. Is it standard for PRO to rename section classes if say there are additions or deletions?

All that remains now is to to either keep or delete the PHP config changes. Thanks for all your help. Sean.

[christian]

Hey Sean,

Based on your description, you’re using the dynamic classes generated by the builder. They are for the builder’s internal use. And by dynamic, I mean they will get updated depending on your changes in the page.

The recommended way is to add your own class to the element.

Or, use the Element CSS. For more details, please visit this link.

Thanks.

[doughballs]

@christian_y, thanks - I understand classes fine, my issue is slightly more complicated though. The only way I could nest the content modal element inside another element (the tabs) was to build a single content modal below, hide that section, then copy and paste the content modal div numerous times into the tab content. This works exactly as I need it to, and I need to reference the content modal class to get the styling and functionality, but if PRO is changing the number of the class, then it screws up the whole process.

Will this keep happening? PRO changing the numbers of the classes? Or is it me that is provoking the class change somehow?

[Prasant]

Hello @doughballs,

Thanks for updating the thread.

It’s not at all recommended to use auto generated class names reason being when theme is updated, there is a possibility of breaking the layout if you are using auto generated class names. We recommend you to add your own class name into section and or elements. My colleague @christian_y has shown the steps to add class name in previous reply.

Thanks.