Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.
What I am missing?
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You also need to specify the active class on the default tab-pane (and for fading tabs you need to add the in class), thus you should change
<div class="tab-pane fade" id="graduation">
to
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">
In case someone was here looking for a solution for react-bootstrap (like I was). There's a defaultActiveKey attribute you can specify on the Tab component. Reference
Related
I have the following fiddle that when you run it shows a red border that indicates my div that is in question. Really I want my div to be under the 2 divs above it that are on the right and left sides.
The div in question is this:
<div id="Tabs" role="tabpanel" style=" position:relative; width:100%; border:1px solid red;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">"U or R" Table Scripts</li>
<li>"U or R" Table CRUD</li>
<li>"E" Table Scripts</li>
<li>"X" Table Scripts</li>
<li>JSON DATA</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px; overflow:auto;">
<div role="tabpanel" class="tab-pane active" id="sqlOutput" ng-bind-html="sqlOutput | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane" id="sqlCRUD" ng-bind-html="sqlCRUD | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="sqlETable" ng-bind-html="sqlETable | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="xTableInserts" ng-bind-html="xTableInserts | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="JSONDATA" ng-bind-html="JSONDATA | unsafe" style="height:200px; overflow:auto;"></div>
</div>
</div>
Please advise on what I need to change? You may notice in my fiddle that there are duplicate body instructions. I have the dashboard.css (bootstrap theme) and the bootstrap.css combined there.
You need to clear the floated elements. In this case you can use a <div class="clearfix"></div> between the two columns and your red div. I suggest using the bootstrap grid though.
https://jsfiddle.net/1bzpaLfd/1/
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
Tab A is the default tab in most situations. But I want to visit tab B after this page loaded in certain conditions. Can I just visit the page via different URL with something like HTML anchor?
Thanks for any suggestions...
I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
I'm using the twitter bootstrap modal functionality.
I've resized my modal so that the width is larger, but instead of my content filling the newly opened space, it instead acts like the content area has gotten smaller. How can I make my pills be all on one line?
CSS
.modal-body {
max-width:65%;
}
.modal {
width:65%;
margin-left: -32.5%;
}
HTML
<div id="newItemModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<h3>New Item</h3>
</div>
<div class="modal-body">
<div class="control-group">
<ul class="nav nav-pills">
<li class="active">Hot Food</li>
<li>Cold Food</li>
<li>Breads</li>
<li>Breakfast</li>
<li>Drinks</li>
<li>Dessert</li>
<li>Banquets</li>
</ul>
</div>
</div>
<div class="modal-footer">
CONFIRM
CANCEL
</div>
I've uploaded an image comparing the before and after appearance of the modal
http://imgur.com/VtjDU4Y - before
http://imgur.com/n4BvewK - after (red circle is my edit)
Thanks for reading.
I have the tabs code working but on page load all the tabs are displayed... Once I click the second tab only that second tab's content is displayed. I click back to the first tab and only the first tab's content is displayed. Refresh the page and you see all the content on this first tab until you repeat the above steps. Any ideas what I am missing?
<ul id="tab" class="nav nav-tabs">
<li class="active">
firstab
</li>
<li class="">
secondtab
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="firsttab">
<p> Content of first tab </p>
</div>
<div class="tab-pane fade active in" id="secondtab">
<p> Content of second tab </p>
</div>
</div>
Both tabs can't have the class "active"