Working With BootStrap Tabs

0
votes

I am working with bootstrap tabs and am having some issues. When loading the page, the first tab is active as it should be, but it's loading in a different spot than the rest of the content when the other tabs are clicked, and when clicking back to the main tab, the content does not appear.

Content doesn't appear in top left corner

Also, when click another tab, the content displays in the bottom left corner of the screen.

Like this

How can I get my tab content to always display in the top left corner of the tab pane and get my first tab content to always load when clicking back to it?

Here is my tab code: 

<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <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>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

1
javascripthtmlcsstwitter-bootstraptabs

1 Answers

0
votes

Your code works fine, check the jsfiddle https://jsfiddle.net/bsuqoryd/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <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>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

You might be missing library files or may be ordering of the library files are wrong. Check the console for error.

In the code I have mentioned the ordering of the required library files.

One more jsfiddle https://jsfiddle.net/bsuqoryd/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
            <ul id="rowTab" class="nav nav-tabs">
                <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>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
        </div>
    </div>
</div>