I'm trying to make the code below (from bootstrap v4) scrollable, considering the v-pills-tab as a child from a container that has height and max-height 100%:
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</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>
My problem is when I add more nav-links than the container-div support, these links stay out the limit of 100%.
nav class in the first div has display: flex;. Turn off this style and you will be able to scroll vertically. It works for me.
Related
This Bootstrap 4 code sample is copied from this official documentation page: https://getbootstrap.com/docs/4.6/components/navs/#javascript-behavior
How do I link a specific page from a page footer link?
Something like: Profile
I'm using ASP.NET MVC and tried these two SO solutions without success:
https://stackoverflow.com/a/12138756/261010
https://stackoverflow.com/a/50290446/261010
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
<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>
</div>
I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
I have one big menu that I need to divide into cols for mobile and desktop.
So I put put around it:
<div class="col-xl-12 col-md-12 col-6 first-set-skills">
Menu 1
</div>
<div class="col-xl-12 col-md-12 col-6 second-set-skills">
Menu 2
</div>
The problem is that I need both of them to act as one menu. Selecting one item from either of these should only display one result and one active menu item. But because I separated the menus, they show two active items in the menu:
Is there a way to make them both act as one menu, even though they are separated by divs ?
Here is the JSFiddle: https://jsfiddle.net/prozik/qLu9pfje/12/
Here is the bootstrap documentation for the nav (vertical) I followed: https://getbootstrap.com/docs/4.0/components/navs/
Here is the code:
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</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"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>
There is a jQuery hack to get the desired output,
Add
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
And add id to nav-pills div. Check the snippet
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupOne">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupTwo">
<a class="nav-link" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>
</div>
I created vertical tabs with Bootstrap, currently the "home tab" is not showing the tabbed content, kind of buggy. Also, I'm having trouble creating sub tabs to each individual vertical navs. Is it easier to create sub tabs with jQuery?
HTML
<nav class="navigation">
<ul class="menu nav-menu">
<div class="nav nav-tabs flex-column" id="nav-tab" role="tablist">
<li class="menu-item-has-children"><a class=" nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a></li>
<li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a></li>
</div>
</ul>
</nav>
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-12">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
home
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
profile
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
contact
</div>
<div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab">
about
</div>
</div>
</div>
Thanks!
I tried everything, but I couldn't bring this menu-item to the center. Here is my code:
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
For that, you can use d-flex justify-content-center bootstrap class.
<div class="d-flex justify-content-center">
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
You can use <center></center> to center the navbar
<center>
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
</center>
Make title container as display:block and each title display:inline-block:
.nav {
display: block;
text-align: center;
}
.nav > a {
display: inline-block;
}
<div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
<a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
<div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>