All tabs quit working again

[Ian]

Content on second tab does not show when I click on the tab

Pagebuilder is not showing the tabs correctly. (all content showing up in first tab)

I have a set of three tabs on each of my product pages. They have all recently quit working.

Please let me know if you need any more info.

-Ian

[purplesu]

Same problem here, I just found out where the problem is.

1. Open dante/swift-framework/page-builder/builder/shortcodes/tabs.php

2. find line 25 :

$output .= "\n\t\t\t" . '<div id="'. preg_replace('/\s+/', '-', $id).'" class="tab-pane load">';

replace with:

$output .= "\n\t\t\t" . '<div id="'. preg_replace('/\s+/', '-', strtolower($id)).'" class="tab-pane load">';


I dunno this solution is correct or what, but it works fine on my site. Hope it was useful to you and sorry for my bad english.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

@purplesu – Thanks for sharing the solution to resolve it.
Mohammad 🙂

[Ian]

This has not fixed whatever the problem is on my site.

I was planning on launching this site this week and now all of my product pages are not working.

-Ian

[Rui Guerreiro – SUPPORT]

Hi @Ian

Will check it.

-Rui

[Rui Guerreiro – SUPPORT]

Hi,

The content itself is messed up, the problem seems to be with the row/columns layout assets that don’t work well inside the tabs.

It will have to be create another tabs asset and move the existing assets to their new tabs removing them from the existing rows.

Unfortunately there is no other way to fix this.

Do you face the same situation in other pages?

-Rui

[Ian]

Rui,

I face the same situation on about a dozen pages. These have been working for months. This site has been slow going up because of client issues, but these pages had been finished and tested and approved.

Without the column assets they will now behave & look different then what was working and approved by the client.

-Ian

[Ian]

Rui,

My bad I did add the column assets to fix a spacing issue, looks like I will need to step these pages back.

-Ian

[Ian]

Rui,

I did figure out where my spacing issue is coming from it is the fact that the single image margin shown below is overridden by the 0 margin of the animation CSS. I can fix this with a CSS update but I think that the 30px margin on the bottom should be part of the default CSS on the phone where you are not getting the animations.

.spb_single_image {
    margin-bottom: 30px;
}

.sf-animation[data-animation="fade-from-left"], .sf-animation[data-animation="fade-from-right"] {
    margin: 0 auto;
}

-Ian

[Rui Guerreiro – SUPPORT]

Glad that it’s sorted. I only checked that page, and the structure of the content was messed definitely from those rows/columns inside the tabs.

Will forward your suggestion to Ed.

Thanks

-Rui

[Swift Ideas – Ed]

Hi Ian,

That CSS isn’t in the default stylesheet.. must have been something added to yours specifically by you/your team.

– Ed

[Ian]

I find the following in line 2161 under “Load In Animations” I always use a child theme and do not ever change files in the main theme.

/* --------------------------------------------
	LOAD IN ANIMATIONS
-------------------------------------------- */

.sf-animation[data-animation="fade-from-left"], .sf-animation[data-animation="fade-from-right"] {
	margin: 0 auto;
}

I added the follow to fix the spacing issue on mobile:

@media only screen and (max-width: 767px){
	.sf-animation[data-animation="fade-from-left"], .sf-animation[data-animation="fade-from-right"] {
	    margin: 0 auto 30px;
	}
}

-Ian

[Swift Ideas – Ed]

My mistake – couldn’t find that first time around, thanks for the heads up. I’ve adjusted the css for the next update.

– Ed