Skip Navigation

[Resolved] Frontend containers and map not working

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.16 hours from now. Thank you for your understanding.

This topic contains 16 replies, has 4 voices.

Last updated by maiS 2 months, 3 weeks ago.

Assigned support staff: Christian Cox.

Author
Posts
#2092251
Skærmbillede 2021-06-18 kl. 07.52.11.png
Skærmbillede 2021-06-18 kl. 07.52.06.png

Hi there,
In my backend when i edit the content template everything looks correct but in the frontend one of the containers have a huge margin to the right and the map is missing.
The content template is "Template for camps - final" and you can see a camp here: hidden link

I also added screenshots of the 2 issues. Can you help fixing it? All settings looks like they are correct in the backend so i am not sure what to do.

#2092485

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

When I check the content template I can see quite a few errors in the browser console, some of which point to likely PHP errors on the server, too.

It would be easier to debug on a local copy of the site, is it okay if we take a copy for testing?

#2092717

Yes of course, you have permission to do whatever it takes 🙂

#2093215

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello there! I might agree with Nigel that this is probably caused by PHP errors, but I can't until I fully understand what is(are) the issue(s).

I confirm that the map is not showing in the frontend, and that is probably caused by the Javascript errors that Nigel has talked about, and maybe because of PHP errors too.

But, regarding the container width, I think that is caused by a conflict between a combination of WordPress CSS styles, and the theme's styles. Especially for "Full width" blocks. Check this screenshot hidden link

So, I disabled the "Full width" on the grey container, but it gets its content to stretch more than the container. But, I can't find how to disable to "full width" on the Columns block. We can do it with custom Javascript code.

Regarding the Map that does not appear, I am taking a copy of your website and I'll debug it further locally.

#2093251

Hi Jamal,

Okay, should I do anything or shall I just wait until further notice from you?

#2093733

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

From what I gathered so far, the Map issue comes from a combination of plugins. As long as the following plugins are active with the Toolset plugins, the map does not render correctly.
- Checkout Field Editor for WooCommerce
- Checkout Field Editor for WooCommerce
- Google Language Translator
The issue comes from a Javascript error like the following:

jquery.min.js?ver=3.5.1:2 Uncaught TypeError: Cannot read property 'event' of undefined
    at WPViews.ViewAddonMaps.self.initGoogle (wpv_addon_maps.js?ver=2.0.8:1459)
    at WPViews.ViewAddonMaps.self.init (wpv_addon_maps.js?ver=2.0.8:1569)
    at new WPViews.ViewAddonMaps (wpv_addon_maps.js?ver=2.0.8:1575)
    at HTMLDocument.<anonymous> (wpv_addon_maps.js?ver=2.0.8:1579)
    at e (jquery.min.js?ver=3.5.1:2)
    at t (jquery.min.js?ver=3.5.1:2)

We'll need to check in a clean install to confirm if it is a general compatibility bug between Toolset and these plugins or just an exception that occurs on your website. Please install those plugins in the following test site to confirm that

Regarding the container issue, I still believe that the issue comes from how the theme handles the "alignfull" class which is a default WordPress class. I suggest deactivating the full alignment for all blocks(the container block, and the columns block) check the following screenshots:
- hidden link
- hidden link

I hope this helps. Let me know when you get to test the plugins on the test site. I'll take it from there to check what we can find and how we can fix it on your site.

#2094093

Hi Jamal,

Okay thanks I will try the thing with the containers.

Regarding installing the plugins on the test site: Sorry but how do I access the test site? Might be me who is stupid but where is it? 🙂

New threads created by Jamal and linked to this one are listed below:

https://toolset.com/forums/topic/issue-with-a-map/

#2094103
Skærmbillede-2021-06-21-kl.-07.34.48.jpg

hi jamal,

I just took a look at the container thing and saw what you did. But deactivating the full width like you did makes it look like this (see sreenshot) and now the columns are not pulling the data they are supposed to - only the 1 column is.

What should I do now? I chose not to do anything and ask you first.

#2094119

Hi Jamal,
I just realized that I might only have typed in 1 contact person so I think the columns are working so it is just the layout as in the screenshot above that I need help with.

#2094333

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

My apologies, I forgot to share the one-click-login link to our test site. So, I split a new ticket to handle the map issue there, and let's focus on the container on this ticket.

The last screenshot that you shared is rendered that way because the "Columns" block has still the full width applied. Check this screenshot hidden link

After disabling the fullwidth on the columns block, we get the following rendering hidden link
You can then apply some more custom styles on the columns block, or for each column of its children, or for the parent container block.

I'll remain at your disposal.

#2094481

Hi Jamal,

No matter what i seem to add of settings or styles the result comes out badly. Is there anything specific i need to do?

#2094503

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Sorry, but I don't know what would you mean!

Keep in mind that the design of the website is primarily coming from the theme. So, I'll suggest switching temporarily to a default theme, in order to see how both themes display the output from WordPress/Toolset.
You can use the "Health Check & Troubleshooting" plugin, which will let you switch the theme only for you, without affecting the live visitors of the site.
https://wordpress.org/plugins/health-check/

If you elaborate more on what's is wrong with the styles, maybe add some screenshots, I'll do my best to help.

#2094575

Hi Jamal,

Oh sorry, i am only talking about the container background in the template. I want it to be full width but then i set it to full width, some way or another, it still looks wrong with weird margins and stuff. So i basically just want to find a way to make the grey background full width without it looking all wrong.

#2095047

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Screen Shot 2021-06-21 at 5.49.46 PM.png

Hi, Jamal asked me to take a look and see if there is a good CSS solution for this problem. I think you can try adding this custom CSS to override the theme's container width on the single camp template:

.camp-template-default #main .wf-wrap {
    width:100%; 
    padding-left:0;
    padding-right:0;
}

That should make the entire page full-width, like in this screenshot. If you're looking for something different, please provide a bit more information to help me understand what you'd like to accomplish.

#2099983

Hi Christian,
That is exactly what i am looking for - thanks. I will put in the code