Tabs causing page jumping

6 replies·opened Mar 6, 2017
N
nolybomMar 6, 2017

I'm using the latest version of your theme. I have tabs positioned toward the bottom of the page.
Every time I click a tab, the screen jumps toward the top.
How can I prevent this from happening?

Here is a demo link:

http://ic.mobylon.com/ved/tabs-page-jumping-bug.html

N
nolybomMar 6, 2017

Dirty fix is to give the

.tab-container {
/fix page jumping when clicking on tabs/
min-height: 440px;
}

Can you please come up with something more proper?

Thank you!

S
SemiColonWebSTAFFMar 22, 2017

Hello,

Please consider adding the onclick="return false;" Attribute to the <a> Tag of the Tab Navs.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

S
S853736Apr 10, 2017

Unfortunately I have the same problem and "onclick" doesn't solve it.

Here is my code:

<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab1" onclick="return false;" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#tab2" onclick="return false;" role="tab" data-toggle="tab">Tab 2</a></li>
        <li role="presentation"><a href="#tab3" onclick="return false;" role="tab" data-toggle="tab">Tab 3</a></li>
        <li role="presentation"><a href="#tab4" onclick="return false;" role="tab" data-toggle="tab">Tab 4</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab1">Tab 1</div>
        <div role="tabpanel" class="tab-pane" id="tab2">Tab 2</div>
        <div role="tabpanel" class="tab-pane" id="tab3">Tab 3</div>
        <div role="tabpanel" class="tab-pane" id="tab4">Tab 4</div>
    </div>
</div>

Every time I click a tab the screen scrolls up so that the tab is on top of the page.

Any advise how to fix this? Thanks!

Sebastian

S
S853736Apr 10, 2017

This is caused by a 3rd party script that I use on my site. Nothing you can do here.

I
ikovicApr 20, 2017

Have the same problem.
Tried this. Does not change anything.

S
SemiColonWebSTAFFApr 23, 2017

Hello,

Consider using the following code:

$(".tabs ul li").on( 'click', 'a', function(e){
	e.preventDefault();
	return false;
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard