I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
Related
I am able to toggle across the tabs on larger devices but on the smaller devices, it does not work. There are also no errors in the console. The tab is also wrapped in a div that has a z-index of -1. I need it to have a z-index of -1 so that when I scroll up it goes under another div. If I remove the z-index from the wrapper I am able to click the tabs.
I cannot add a higher z-index to the div I'd like these tab items to scroll under because a dropdown list from the navbar will be hidden behind it.
<ul class="nav nav-tabs innerTab" id="profileTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button"
role="tab" aria-controls="personal" aria-selected="true">Personal Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button"
role="tab" aria-controls="account" aria-selected="false">Account
Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="kyc-tab" data-bs-toggle="tab" data-bs-target="#kyc" type="button" role="tab"
aria-controls="kyc" aria-selected="false">
Documents</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button"
role="tab" aria-controls="password" aria-selected="false">Password change</button>
</li>
</ul>
<div class="tab-content" id="profileTabContent">
<div class="tab-pane show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
P
</div>
<div class="tab-pane" id="account" role="tabpanel" aria-labelledby="account-tab">
A
</div>
<div class="tab-pane" id="kyc" role="tabpanel" aria-labelledby="kyc-tab">K
</div>
<div class="tab-pane" id="password" role="tabpanel" aria-labelledby="password-tab">P
</div>
</div>
Did u tried wrap or change containers into "label", may be need add them display: block; and remove some padding/margin to keep your layout
I have some genres and relevant Tv shows. Do I necessarily need to convert nav pills into react router Link tags? Or I can use the following bootstrap navigation that is already set up to show the tab content. Would using the later be considered as a bad practice?
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-action-tab" data-toggle="pill" href="#v-pills-action" role="tab" aria-controls="v-pills-action" aria-selected="true">action</a>
<a class="nav-link" id="v-pills-comedy-tab" data-toggle="pill" href="#v-pills-comedy" role="tab" aria-controls="v-pills-comedy" aria-selected="false">comedy</a>
<a class="nav-link" id="v-pills-thrill-tab" data-toggle="pill" href="#v-pills-thrill" role="tab" aria-controls="v-pills-thrill" aria-selected="false">thrill</a>
<a class="nav-link" id="v-pills-horror-tab" data-toggle="pill" href="#v-pills-horror" role="tab" aria-controls="v-pills-horror" aria-selected="false">horror</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-action" role="tabpanel" aria-labelledby="v-pills-action-tab">...</div>
<div class="tab-pane fade" id="v-pills-comedy" role="tabpanel" aria-labelledby="v-pills-comedy-tab">...</div>
<div class="tab-pane fade" id="v-pills-thrill" role="tabpanel" aria-labelledby="v-pills-thrill-tab">...</div>
<div class="tab-pane fade" id="v-pills-horror" role="tabpanel" aria-labelledby="v-pills-horror-tab">...</div>
</div>
</div>
</div>
I am using Reactjs and I am trying to use this list group from Bootstrap 4. However, when I change the A tags to <Link> the code does not work anymore, and will not display anything. What is the best way to have it rendered in React using <Link>?
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
e.g.
<a class="list-group-item list-group-item-action active"... into <Link className="list-group-item... >
I have played around with this code, and after removing the data-toggle="list" the code worked with the <Link> tags!
I have a bootstrap modal inside that I have Tabs. At present all tabs are displaying. I need to hide/disable the tabs so that at a time only one active tab is displayed. When I click on next and previous button the enabling and disabling action of tabs should take place. Kindly help me
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div role="tabpanel">
<ul class="nav nav-tabs">
<li class="active">first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">First tab content</div>
</div>
<md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
<md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
<div class="tab-pane" id="tab2">Second tab content></div>
<md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
<md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
</div>
</div>
</div>
</div>
Let's say your controller is something like this:
angular.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
this.changeTab = function(tab) {
$scope.tab = tab;
}
}]);
You can add ng-clicks to the tabs anchors and an ng-if (or ng-show/ng-hide if you prefer) to the tab-panes, like this:
<div role="tabpanel"
ng-controller="TabController as ctrl">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" ng-click="ctrl.changeTab(1)">
first
</a>
</li>
<li>
<a href="#tab2" ng-click="ctrl.changeTab(2)">
second
</a>
</li>
<li>
<a href="#tab3" ng-click="ctrl.changeTab(3)">
third
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active"
ng-if="tab === 1">
First tab content
</div>
<div class="tab-pane active"
ng-if="tab === 2">
Second tab content
</div>
<div class="tab-pane active"
ng-if="tab === 3">
Third tab content
</div>
</div>
I am having different html page in every tab and i want the active tab active even after refresh using bootstrap if possible
<div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#TypeSettings">Type</a></li>
<li><a data-toggle="tab" href="#EvidenceSettings">Evidence</a></li>
<li><a data-toggle="tab" href="#OverallTypeSettings">Overall Type</a></li>
</ul>
<div class="tab-content">
<div id="TypeSettings" class="tab-pane fade in active">
<div ng-include src="'Templates/AdminSettings/TypeSettings.html'"></div>
</div>
<div id="EvidenceSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/EvidenceSettings.html'"></div>
</div>
<div id="OverallTypeSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/OverallTypeSettings.html'"></div>
</div>
</div>
If you want to remember last opened tab by user, then you have add some JS logic. You can store user last opened tab in a cookie for example.