Columns not displayed correctly after updating to 4.0.7

I found a temporary, but really unorthodox solution by duplicating columns that were displayed correctly and replacing their contents with that of the blocks that displayed badly. While keeping the old columns empty above … very unorthodox but functional.

Additional Info: when I create new columns and drag the content from the old columns, then delete the old columns the layout is fine again.
I have corrected the partner-Netzwerk page now, but there are others showing the same problem:
Can you please check http://b2b-ingenieur.com/iiot-sales-transformation/
thanks,
Markus

Thanks Markus !
This allows to repair temporarily but it would be necessary to find a solution which allows to align the columns.
Best regards
Alex

Hi @Ismael and Enfold team,

Thanks for creating a great, easy-to-use theme.

I have this same issue specifically when I am loading post content via ajax into a modal window. When the content is rendered normally accessing a page, the columns are rendered correctly. The columns rendered correctly until version 4.0.6 and the change in rendering seems to be as a result of a fix implemented in version 4.0.6:
– fixed: “Equal Height Columns” breaks when columns are not 100% width (e.g. 1/3 1/3)

I need the rows to have equal height columns. I understand the need for this fix, but what I don’t understand is why I am experiencing this problem only when fetching the content via ajax?

Based on some debugging, I think that it may be because some hooks are not getting executed as they should when the content is rendered by my custom function. I tried to debug myself and noticed that ShortcodeHelper::$tree property is not set when I do the ajax call, but is set when the page is loaded normally. Consequently when rendering the columns the $meta['siblings']['next'] and $meta['siblings']['previous'] are not being set when the shortcode_handler() method is called in the config-templatebuilder/avia-shortcodes/columns.php file.

Please let me know if there are any simple ways you know of to trigger the code that will set the above values or if there is something else obvious I am doing wrong here? I have included URLs where both normal page calls and ajax calls can be seen as well as login details in the private part of the message

Below is code which is called when the content is requested via ajax:

/**
 * Show mapplic pin information by fetching with ajax
 */
if (!function_exists('show_mapplic_ajax_content') && !function_exists('show_mapplic_ajax_content')) {
	add_action('wp_ajax_nopriv_mapplic_ajax_content', 'show_mapplic_ajax_content');
	add_action('wp_ajax_mapplic_ajax_content', 'show_mapplic_ajax_content');

	function show_mapplic_ajax_content()
	{
		$slug = filter_input(INPUT_POST, 'region-slug', FILTER_SANITIZE_STRING);

		if (empty($slug)) {
			mapplic_ajax_content_error();
		}

		// query for the about page
	    $region_page_query = new WP_Query(['pagename' => trim($slug, " \t\n\r\0\x0B/")]);
	    if (!$region_page_query->have_posts()) {
	    	mapplic_ajax_content_error();
	    }

	    $GLOBALS['wp_query'] = $region_page_query;

	    // "loop" through query (even though it's just one page) 
	    while ($region_page_query->have_posts()) {
	    	$region_page_query->the_post();
	        the_content();
	    }

	    wp_reset_postdata();
	    die();
	}

	function mapplic_ajax_content_error()
	{
		die(
			'<strong>Could not retrieve regional information<strong>
			 <p>There was a problem getting the information related to our presence in this region.
			 Please try again in a minute or two.</p>'
		 );
	}
}

Hi @Ismael,

The problem I faced is that the plugin I used called Mapplic to render a map on the home page cannot use existing pages/posts for the map pin modal content by default, so I had to duplicate the content for a page and for the map pin. This became a big issue because this content was being updated frequently and was becoming a maintenance nightmare.

So, I found a way to intercept the JavaScript event triggered when a map pin is clicked on the map, and to populate the content of the modal with the contents of an existing page. The content of that page is built using Avia Page Builder like any other page on the site, and I retrieve the content of the page using an ajax request that calls the above function in my child theme’s functions.php file. The content is therefore rendered out into the response by calling the WordPress the_content() method.

I’ve included an admin link to the page used in my specific example in the private area of this post, so you can see the avia layout. The only thing the Mapplic plugin does is fire the JavaScript event when a map pin is clicked. The rest is done by the custom code I wrote and the rendering of the content is done entirely by WordPress and Enfold. This layout issue is definitely not related to the plugin. It may be related to the way I am rendering the content in my custom code though. Maybe I can explain a bit further what I am seeing in my debugging.

When the page is requested normally as per the first link in the private area of my previous post, the first if statement evaluates to true, but then both the if statement and the else if statement below that evaluate to false, so the value of $force_close remains false. When I render the content from my custom function, calling WordPress’ the_content() method, the second if statement: if( ! isset( $meta['siblings']['next']['tag'] ) ) evaluates to true and $force_close is set to true (config-templatebuilder/avia-shortcodes/columns.php line 756 – 769). This is where the layout goes wrong, and each column is wrapped in a div.flex_column_table.av-equal-height-column-flextable element instead of the 2 columns (in my case) in the row being wrapped in this element, as represented in the avia advanced layout builder:

                               /**
				 * check if row will break into next column 
				 */
				if( ( false === $force_close ) && ! empty( avia_sc_columns::$first_atts['min_height'] ) && ( 'av-equal-height-column' ==  avia_sc_columns::$first_atts['min_height'] ) )
				{
					if( ! isset( $meta['siblings']['next']['tag'] ) )
					{
						$force_close = true;
					}
					else if( ( avia_sc_columns::$calculated_size + avia_sc_columns::$size_array[ $meta['siblings']['next']['tag'] ] ) > 1.0 )
					{
						$force_close = true;
					}
				}

I have created a temporary workaround by overriding the above file and adding an extra condition: !(defined('DOING_AJAX') && DOING_AJAX) to the first if statement, to prevent the subsequent if (...) { ... } else if { ... } block from being executed at all. I just wondered if someone there could explain why $meta['siblings']['next']['tag'] is not set when rendering the content this way?

Thanks again,
Gareth

Hi @Basilis,

Your reply came through without any content. All I see is:

Was there something you wanted to add?

Regards,
Gareth

• This reply was modified 7 years, 6 months ago by garethlawson.

Hi,

I also have the same problem – columns that are set to “Equal height” are not displayed correctly after updating to 4.0.7.
It will take a very long time if I have to fix it manually.

Hope you have a solution.

Same problem. Page rendered perfectly yesterday. Opened this morning and 1/2 columns are now full-width. Changed nothing. It’s a mess and I have a presentation on 2 hours. : /

Going back a revision shows difference in code at the end

Was:
[/av_four_fifth]
[/av_section]

is now this
[/av_four_fifth] [/av_section]

Happening on two pages now.