CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Dawood Awan
Dawood Awan

Reputation: 7338

Twitter Bootstrap Tabs Jump to Top when changing Tab

I have 4 tabs. With different heights, and on top of the tabs I have a Row.

As in this JSFiddle.

The problem I am having is that the page jumps to the Top when changing from a tab with greater height to a tab with less height.

I am using Bootstrap Tabs.

I have tried removing the data-toggle="tab" from

<li><a href="#caseTab" data-toggle="tab">Case</a></li>

To 

<li><a href="#caseTab">Case</a></li>

And loading the Tab using jQuery:

$('.nav-tabs li a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        return false;
    });

And also tried to return false according to Suggestions Online of return false;

Here:

Could someone help me fix this?

Upvotes: 2

Views: 1272

Answers (2)

Ram kumar
Ram kumar

Reputation: 3162

You can add on css .tab-content{min-height: 950px;} Or you can set min-height from biggest block.

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16311

Add a common min-height to the tabs to ensure that all the tabs have equal height. This will prevent your page from jumping around when switching tabs.

To find the best min-height value, just check the height, say XXpx of your longest tab and use that value as the common min-height value: min-height: XXpx; for all the tabs.

Upvotes: 0

Related Questions