[Resolved] Frontend containers and map not working
This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.
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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
