Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: ScrollCK breaks bootstrap tabs

ScrollCK breaks bootstrap tabs 06 Mar 2018 15:34 #47305

  • Tomzie
  • Tomzie's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 11
  • Thank you received: 1
Hi,

I am using some bootstrap tabs in a website. The theme i build with TemplateCreatorCK using Bootstrap, combined with ScrollToCK plugin. But it seams the scrolltock plugin breaks some bootstrap tab functionallity.

Here are my issues:
  1. When enabling scrollto plugin, the active tab does not load on page load.
  2. When I scroll away from an active selected tab, the tab becomes inactive.

Please see attached screenshot. The first item should be active. Tab content should be inside white container.

How can I fix this?
I would like to keep using the ScrollToCK plugin.


Thanks
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: by Tomzie. Reason: issue is no live on site > removed url

ScrollCK breaks bootstrap tabs 07 Mar 2018 08:37 #47317

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24045
  • Karma: 427
  • Thank you received: 3016
Hi
how are you creating your tabs ? I don't see any extension nor code
have you tried using the tabs in Page Builder CK ?
CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

ScrollCK breaks bootstrap tabs 07 Mar 2018 21:49 #47330

  • Tomzie
  • Tomzie's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 11
  • Thank you received: 1
Hi,

I am creating them manually like described here on w3schools .
I prefer not to use pagebuilderCK to minimize the inline styling. The tabs work fine when ScrollToCK is disabled.

Here is my html base, cleaned it up for your convenience :)
<div class="row-fluid">
	<div class="span4">
		<ul class="nav nav-tabs nav-stacked">
			<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
			<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
			<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
		</ul>
	</div>
	<div class="span8 well">
		<div class="tab-content">
			<div id="tab1" class="tab-pane fade in active">
				<h3>Tab 1 title</h3>
				<p>Tab content here ...</p>
			</div>
			<div id="tab2" class="tab-pane fade">
				<h3>Tab 2 title</h3>
				<p>Tab content here ...</p>
			</div>
			<div id="tab3" class="tab-pane fade">
				<h3>Tab 3 title</h3>
				<p>Tab content here ...</p>
			</div>
		</div>
	</div>
</div>

Any ideas how to fix it?

Thanks for the assist

Please Log in or Create an account to join the conversation.

Last edit: by Tomzie.

ScrollCK breaks bootstrap tabs 08 Mar 2018 07:50 #47335

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24045
  • Karma: 427
  • Thank you received: 3016
ok, I have tested by my side
- copied your code
- installed and enabled scrollTo CK plugin
and it works.

(tested with the code into an article and into a template)
Are you sure that the code is the same ? Can you test with copy/paste this code into another article ?
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

ScrollCK breaks bootstrap tabs 08 Mar 2018 19:14 #47350

  • Tomzie
  • Tomzie's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 11
  • Thank you received: 1
Hi,

So I tried that. And indeed that works.
Then I also added a module on that same page with some tabs. Also works great.

But then I add a link with "scrollTo" class inside the same module and it breaks.
I tried also inside article,.. same thing.

Please test this code to replicate the issue:
<div><a href="#" class="scrollTo">scrollTo link</a></div>
<div class="row-fluid">
	<div class="span4">
		<ul class="nav nav-tabs nav-stacked">
			<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
			<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
			<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
		</ul>
	</div>
	<div class="span8 well">
		<div class="tab-content">
			<div id="tab1" class="tab-pane fade in active">
				<h3>Tab 1 title</h3>
				<p>Tab content here ...</p>
			</div>
			<div id="tab2" class="tab-pane fade">
				<h3>Tab 2 title</h3>
				<p>Tab content here ...</p>
			</div>
			<div id="tab3" class="tab-pane fade">
				<h3>Tab 3 title</h3>
				<p>Tab content here ...</p>
			</div>
		</div>
	</div>
</div>


NOTE:
The scrollTo link inside the module only breaks the tabs inside the module.
And the link inside the article only breaks tabs inside article.


Extra comment:
It seams adding an extra closing </div> after the link fixes the issue. But only when the link itself is allready inside a div.
So when using a scrollTo class inside a link like in the below example, it seams to work fine:
<div><a href="#" class="scrollTo">scrollTo link</a></div></div>

Correction:
Just noticed that adding an extra </div> only works if the link is before the tabs, not after the tabs.
No problem in my case though. Just informing you. :)


Thanks

Please Log in or Create an account to join the conversation.

Last edit: by Tomzie. Reason: found possible solution after some experimenting

ScrollCK breaks bootstrap tabs 09 Mar 2018 09:03 #47359

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24045
  • Karma: 427
  • Thank you received: 3016
I don't understand everything here ... why should we add an extra </div> ? is there something wrong in your code ?
the plugin only adds a <a> tag in the body, some JS and CSS code in the page, nothing more
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

ScrollCK breaks bootstrap tabs 09 Mar 2018 18:48 #47366

  • Tomzie
  • Tomzie's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 11
  • Thank you received: 1
Hi,

My thoughts exaclty. There is nothing wrong with the html code. I don't understand the cause of this issue.

In both article and module...
When using the extra </div>, the tabs work as expected..
Without the extra </div>, the bootstrap tabs are not active on page load.

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.195 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 989 guests and no members online