ScrollCK breaks bootstrap tabs
6 years 8 months ago - 6 years 8 months ago #47305
by Tomzie
ScrollCK breaks bootstrap tabs was created by Tomzie
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:
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
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:
- When enabling scrollto plugin, the active tab does not load on page load.
- 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
Last edit: 6 years 8 months ago by Tomzie. Reason: issue is no live on site > removed url
Please Log in or Create an account to join the conversation.
6 years 8 months ago #47317
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic ScrollCK breaks bootstrap tabs
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
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.
6 years 8 months ago - 6 years 8 months ago #47330
by Tomzie
Replied by Tomzie on topic ScrollCK breaks bootstrap tabs
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
Any ideas how to fix it?
Thanks for the assist
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
Code:
<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
Last edit: 6 years 8 months ago by Tomzie.
Please Log in or Create an account to join the conversation.
6 years 8 months ago #47335
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic ScrollCK breaks bootstrap tabs
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 ?
- 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.
6 years 8 months ago - 6 years 8 months ago #47350
by Tomzie
Replied by Tomzie on topic ScrollCK breaks bootstrap tabs
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:
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:
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
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:
Code:
<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:
Code:
<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
Last edit: 6 years 8 months ago by Tomzie. Reason: found possible solution after some experimenting
Please Log in or Create an account to join the conversation.
6 years 8 months ago #47359
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic ScrollCK breaks bootstrap tabs
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
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.
Time to create page: 0.215 seconds