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
Related
The vertical pills layout is exactly what I want for desktop devices, but for small screen sizes, I want it to be more compact. I need the tab-pane text to display under the nav-link - like under each individual nav-link, not below the whole group of nav-pills.
The following is the base example on the Bootstrap v5 documentation:
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
I tried moving the tab-pane elements directly under their perspective nav-links, but I couldn't get it to work.
Is this possible to do what I'm envisioning? Or alternatively, is there a better way to set this up?
Here is an example using Bootstrap 5's responsive grid classes and CSS media queries to achieve the desired behavior:
<div class="d-flex flex-column flex-md-row align-items-start">
<div class="nav flex-column nav-pills w-100 w-md-auto me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content w-100" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
<style>
#media (max-width: 767.98px) {
.nav-pills {
display: flex;
flex-wrap: wrap;
}
.tab-content {
display: flex;
flex-wrap: wrap;
}
.tab-pane {
width: 100%;
}
}
</style>`
This will display the nav-pills vertically on larger screens, and horizontally on smaller screens, with the tab-pane elements displayed directly underneath the corresponding nav-link.
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>
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 am trying to put a checkbox in a tab panel on the left side. But the checkbox cannot check or uncheck. Can anyone help me to solve this ? This is my code and the image on what I am trying to do.
<aside class="sm-side">
<div role="tabpanel">
<ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
<li role="presentation" class="brand-nav active" >
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">
<input type="checkbox" id="eq1" >
<label for="eq1">Resource 1</label>
</a>
</li>
<li role="presentation" class="brand-nav">Resource 2</li>
<li role="presentation" class="brand-nav">Resource 3</li>
<li role="presentation" class="brand-nav">Resource 4</li>
</ul>
</div>
</aside>
<aside>
<div role="tabpanel" class="tab-pane active" id="tab1">
<p>Hello1</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<p>Hello 2</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab4">
<p>Hello 4</p>
</div>
</aside>
Image of what I am trying to do