Templates Plugins Courses

CSS Tools Plugin Breaks Jobly Template

My main issue is many of the pages from my template are not appearing and I have no idea why. Almost half the pages are not available. How do I fix this? I’ve also included a screenshot example of a broken page.

Most of the pages under the editor are broken.

This is what I was told by Bubble support:
The issue is being caused by a plugin, CSS Tools, installed to your app. Plugins are made by third party developers with custom code, and the plugin’s developer is in the best position to provide more thorough troubleshooting since they are privy to the custom code used. You can get around this by uninstalling the plugin, however, it’s unclear if this plugin is required for some of the template’s features.

Templates are also made by third party developers and, fortunately, the creator of the template used in this app is also the creator of the plugin which you are experiencing an issue with. Any time you use a third party product like a plugin or template, you can always get help from the developer directly using the “Service Link” field on the plugin’s page.

The template also includes some custom code. Adding custom code to your page’s header is a feature of apps on paid plans. Your app, on a Hobby plan, may not work as intended since this custom code cannot run. Again, it’s best to reach out to the developer directly to get an idea of whether this may be the cause of some of the pages not working.

I’ve tried uninstalling and even upgrading to a paid plan but the issue prevailed. The interesting thing to note is that the actual pages load in preview mode but not in design which is where I’d need to look at it to develop the app and workflows.

Hello, @kadin. Thanks for reaching out.

I suppose, the main problem you’ve faced is the invisible content of the Design pages (in Editor)?
Would you kindly try to open the Element tree of any page (for example, a customer-center) and expand the parent elements in there? + uncheck the “Show only hideable”

If you click on the “eye” icon, to the right of the element name, it will be visible. Please take a look at this video example:
https://www.loom.com/share/98940c7ac3d3402e8a55c73bcc875006

Can you please try what I suggest and confirm, if your issue is resolved? I hope it helps :pray:
Regards,

I tried that but it doesn’t resolve my issue. This is not the solution.

CSS Tools is breaking the page. Please look into that.

When I try to unhide those elements, it’s just a bunch of modals that are overflowing on the page and eclipsing each other.

That’s not how the page used to look. I don’t know if some recent update from Bubble broke it but there’s an error code that I referenced to Bubble and it’s related to CSS Tools which makes sense because all the elements are there but they’re not styled or showing correctly.

It’s pretty simple. Please have the plugin and/or template developer look into it because it’s halting my development and this isn’t what I paid for.

Also, now the page isn’t even loading properly in preview mode so it’s both in design and preview mode.

@kadin,

Can you please add our support email as a collaborator of your app - [email protected] - this helps me to investigate the issue you’ve faced.

Note: the support email can be added as a collaborator of the app even if your subscription plan is a Hobby.

I have checked the demo template and can see no issue within it. The suggestion I’ve provided works well on our side. Please provide access to your app to help us figure out the root cause of your problem.

Thanks for understanding.
Regards,

I went ahead and did that.

You’ll notice that the preview mode for many pages isn’t loading and similarly, in the design tab the page isn’t loading. However, it is showing for the index page.

It’s just that in the past I haven’t had to hide or unhide any elements. I need to look at each page from the user’s perspective so that I can adequately make changes and additions. According to your suggestion, I have to click different elements and figure out which one belongs where. The list is pretty long and half of those elements are popup modals.

I hope this makes sense and again, for what it’s worth, the issue is related to the CSS Tools plugin.

Thanks for your help!

@kadin,

Thank you for providing access to your app :pray:

I have made an investigation of your Jobly template and here is the result:

Yes, the structure of the Jobly template is a bit complex. Template developers have placed the list of related groups/popups/elements in one page - in order to keep the logic and functionalities connected within one page.

For example, the customer-centre page contains the information that is available for the customer only.
While you’re previewing the page instantly from the Design, it is empty because there is no data to display on the page. The data, which is being desplayed on this page, is related to the current user which is viewing the page. And when you’re not logged in as the correct user, you see the blank page.

That’s why to preview the customer-centre page, I’d like to suggest you to log in as Demo Customer (a quick solution):
Login > Demo Customer > The page is available for the preview (all elements are clickable, etc).

Yes, you have to do this due to the structure of the page. It is not that difficult if you understand how the nesting works:

The first outlined element in the Element Tree is a Group Page - this is the main working area of the customer-centre page.

If you expand the Group Page (click on it or the plus icon), you will see it’s child elements. The next element that is needed to expand to see the main content of the page is a Group Main.

Once you do this, you can see the main elements of the Group Main. There are Customer Edit, Invoices, Quotes, Jobs, etc. If you expand and make visible each of these groups separately, you will be able to see them in the design area and make changes to them.

This is how the Bubble Editor works and how some elements are nested, due to the logic of structuring elements on the page. It is not a bug of the template, but the “Parent-Children relationship” and element positioning logic of the web app.

If you follow my instructions and read some more documentation on Bubble, it will help you to manage your template with more ease and pleasure:
https://manual.bubble.io
https://manual.bubble.io/building-a-user-interface/general-principles

Also, please, do not hesitate to take a look at the template documentation:
https://docs.zeroqode.com/templates/jobly-business-management-like-jobber-template

The suggestion I’ve described is relevant for all pages of your template. You need to expand each element in the Element Tree to find the necessary one (that you need to change, etc).

I hope it helps :pray:
Regards,

Okay, thank you so much for elaborating.

I’m going to take some time and review the template docs as well.

I’ll follow up if I have any other questions, but I really appreciate your help here.

1 Like

@kadin,

Sure, feel free to ask more questions, when you will need it. Have a great time :slightly_smiling_face:

Regards,