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>
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>
Related
i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.
I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118
I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.
I have the following script:
$(".btn.btn-default").click(function () {
$(this).siblings().removeClass('active').end().addClass('active').val($(this).text());
if (this.id.contains('fear')) {
$('#fear').val($(this).text());
} else if (this.id.contains('control')) {
$('#control').val($(this).text());
} else if (this.id.contains('danger')) {
$('#danger').val($(this).text());
$('#tab2').tab('show');
}
});
Focusing specifically on when #danger is clicked, I'm trying to change the bootstrap tab with:
$('#tab2').tab('show');
however it does not seem to work. Any ideas?
//Updated with tab html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Step 1</a></li>
<li><a data-toggle="tab" href="#tab2">Step 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div id="obj" class="draggable drag-drop"> Grass </div>
<div id="obj" class="draggable drag-drop"> Tree </div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div id="act" class="draggable drag-drop"> Fire </div>
<div id="act" class="draggable drag-drop"> Collapsed </div>
</div>
I want to include col-md-4 in content-tab but that not working image or text not hide if i click next tab. My target is Ihover plugins in 3 column but if i click next tab previous not hide
<ul class="nav nav-pils nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
It isn't working because Bootstrap columns must be a child of an element with the row class. Try this:
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="row">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
</div>
It is not working because loga, dtp and android tabs are child of webdesign tab. Hence, webdesign tab will display on default.
Try this:
<ul class="nav nav-pils nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
This markup needed considerable cleanup, it's always a great idea to refer to the Bootstrap documentation for tabs and nav pills when you hit problems. Here's the code you need:
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
<div class="col-md-4">
<h1>col1</h1>
</div>
<div class="col-md-4">
<h1>col2</h1>
</div>
<div class="col-md-4">
<h1>col3</h1>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="loga">
tab loga
</div>
<div role="tabpanel" class="tab-pane" id="dtp">
tab dtp
</div>
<div role="tabpanel" class="tab-pane" id="android">
tab android
</div>
</div>
Not sure I'd mix and match between nav-pills and nav-tabs, but that's your prerogative.
TL&DR: When using a col-* you need to make sure it has a parent that is a div class="row". The rational is a row establishes a complete boundary (end-to-end) and a col-* breaks that boundry into 'columns'/'sections'.
Solutions: Is provided by the accepted answer; This provides additional justification.
<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
<div class="col-md-4">
<h1>col1</h1>
</div>
<div class="col-md-4">
<h1>col2</h1>
</div>
<div class="col-md-4">
<h1>col3</h1>
</div>
</div>
I use Bootstrap nav-tabs. With the example below I have no problem if the page's URL is mypage
($stateProvider.state('ide', {url: '/mypage',...)
but I must have an id parameter
($stateProvider.state('ide', {url: '/mypage/:id',...)
that no longer works. I am redirected to the homepage of the site . Do you know how to change my code to make it work?
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
My link go to http://localhost:8080/#/mypage#tab2 instead of http://localhost:8080/#/mypage/1063#tab2
I find the solution:
In my AngularJS controller I add:
$scope.keepId=id;
In my HTML page, I add #/mypage/{{keepId}} in link:
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
hi guys i want to make a vertical nav-tab with nested sub nav-tab i used a sample code from stackoverflow here is jsfiddle but i need somthing more complex i try but did not get what i want below is the scree shot what i exactly want if any one have idea on it please provide me some suggestion it should be on bootstrap 2.3
below is code
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
You can do something like this:
.nav-tabs > li li {
margin-left: 60px;
}
That'll do the trick.
http://jsfiddle.net/gqfhZ/