Trigger click is not working using bootstrap 4 tabs - javascript

I'm using bootstrap 4 tabs as pages, there is a issue because i want to display tabs/pages content on body click but when i'm using body click then trigger click is not working on prev and next buttons otherwise its working fine, how can i fix it?
My Code:-
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function () {
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function () {
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages =`
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function () {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i> Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>


Add e.stopPropagation(); on both button next and prev click function.
This will prevent the click function propagation to the body.
Check the snippet
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages = `
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function() {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i>
Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i
class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>

Related

How can I show and hide content with Bootstrap 5 for more 5 buttons.Without the content gets stacked on top of each other

I have 5 buttons that display content when I click. I want to be able to hide content when any button is clicked. For example, clicking button 1 displays the button 1 content. If button 5 is clicked, I would first hide the button 1 content before displaying the button 5 content.
This solution only works if there were two buttons.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
Button 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse1').classList.remove('show'); })();">
Button 2
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
Button 3
</button>
</p>
<div class="collapse" id="collapse1">
Button 1 content
</div>
<div class="collapse" id="collapse2">
Button 2 content
</div>
<div class="collapse" id="collapse3">
Button 3 content
</div>

Not being a professional webdev myself I can empathize with the struggles of making bootstrap do what you'd like
Based on my little experience with it, I think that this might fix your problem
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.collapse').forEach(collapse => {
collapse.classList.remove('show');
})
})
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">Button 1</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse1').classList.remove('show'); })();">Button 2</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">Button 3</button>
<div class="collapse" id="collapse1">
Button 1 content
</div>
<div class="collapse" id="collapse2">
Button 2 content
</div>
<div class="collapse" id="collapse3">
Button 3 content
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Seems like you just want pilled tabs.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#panel-1" type="button" role="tab" aria-controls="panel-1" aria-selected="true">Button 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-2" data-bs-toggle="pill" data-bs-target="#panel-2" type="button" role="tab" aria-controls="panel-2" aria-selected="false">Button 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-3" data-bs-toggle="pill" data-bs-target="#panel-3" type="button" role="tab" aria-controls="panel-3" aria-selected="false">Button 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-4" data-bs-toggle="pill" data-bs-target="#panel-4" type="button" role="tab" aria-controls="panel-4" aria-selected="false">Button 4</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-5" data-bs-toggle="pill" data-bs-target="#panel-5" type="button" role="tab" aria-controls="panel-5" aria-selected="false">Button 5</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="panel-1" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Panel 1</div>
<div class="tab-pane fade" id="panel-2" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Panel 2</div>
<div class="tab-pane fade" id="panel-3" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 3</div>
<div class="tab-pane fade" id="panel-4" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 4</div>
<div class="tab-pane fade" id="panel-5" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 5</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Bootstrap 5 - two navs one tab-content

I have code consisting of three identical blocks, each with at least two nav and one tab-content. The problem is that I can't make it so that when I click on an item to deselect the active item in the other list
I found a similar solution for bootstrap 3, but I can't translate it correctly for bootstrap 5, I'm not good with scripts.
bootstrap multiple nav tabs for tab content
another solution for BS3
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js"></script>
<div class="MyTabPillsOne">
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 1</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-3" aria-selected="true">1</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-3" aria-selected="false">2</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">3</button>
</div>
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 2</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link " data-bs-toggle="pill" data-bs-target="#tab-a" type="button" role="tab" aria-controls="tab-a" aria-selected="false">a</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-b" type="button" role="tab" aria-controls="tab-b" aria-selected="false">b</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-c" type="button" role="tab" aria-controls="tab-c" aria-selected="false">c</button>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab-1">
<h1>1</h1>
</div>
<div class="tab-pane" id="tab-2">
<h1>2</h1>
</div>
<div class="tab-pane" id="tab-3">
<h1>3</h1>
</div>
<div class="tab-pane" id="tab-a">
<h1>A</h1>
</div>
<div class="tab-pane" id="tab-b">
<h1>B</h1>
</div>
<div class="tab-pane" id="tab-c">
<h1>C</h1>
</div>
</div>
</div>

After reading documentation, I wrote this script:
function selectorFlow(selector) {
document
.querySelectorAll(
"." + selector + ' .nav-link[data-bs-toggle="pill"]'
)
.forEach((t, i) => {
t.addEventListener("show.bs.tab", function (e) {
var active = document.querySelector(
"." + selector + " .nav-link.active"
);
active.classList.remove("active");
});
});
}
selectorFlow("MyTabPillsOne");
selectorFlow("MyTabPillsTwo");
selectorFlow("MyTabPillsThree");
The solution is not ideal, but the deadline was tight.

Here is my solution for bootstrap#5.2.3
$('.nav-pills button').click(function() {
var $selector = $('.nav-pills button[data-bs-target="' + $(this).attr("data-bs-target") + '"]').not(this);
var nav = $selector.closest('.nav-pills');
nav.find('button').removeClass("active");
$selector.addClass("active");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Content 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Content 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Content 3</div>
</div>
<br/>
<ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>

Bootstrap 5 Dropdown & Navs: Cannot read property 'children' of null

I get this Dev Console error message "Cannot read property 'children of null" while I'm trying to use a dropdown button with Nav Tabs in Navbar Component.
when I click on the dropdown item to display nav-link in navbar I get this Dev Console error message "Cannot read property 'children of null"
Live Example: https://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>

Tabs (data-bs-toggle="tab") should be contained inside a nav nav-tabs...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Demo
Caveat: This is not the intended use of Bootstrap Tabs and Dropdowns. Dropdowns aren't designed used to toggle Tabs, and Tabs aren't meant to be used in the Navbar.

This doesn't describe why it's happening, but if you would like a solution.
Remove some of the attributes associated with the dropdown list item buttons (see below for example). Depending on what you want to do, you can either set up JavaScript event listeners for those buttons. Or you can change the buttons to anchor tags and navigate to a different page.
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
Example 02
</button>
</li>
</ul>
</div>

"Leaf" menu items like Example 1 and Example 2 should not contain data-bs-toggle="dropdown"

How can I make a bootstrap media list with a scroll bar?

Here is my code:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active " id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can I make the bootstrap media list(i.e line 81) with a scroll bar?
I have using a "position-relative" and "position-absolute" class to make the browser show a scroll bar.
Unfortunately, it does not work.
It is because when I browse the web page with a mobile phone the media list is too long.

Use CSS, place this into the empty <style></style> tag, and remove the overflow-auto h-100 classes from the ul.
#pills-info {
height: calc(100vh - 100px);
overflow-y: scroll
}

The scrollbar can be added by using a CSS class with these 2 attributes:
overflow-y: scroll
max-height: height;
An example CSS class for scroll bar:
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
Here is the working example with CSS class added to the list:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active" id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100 scroll-bar">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

Bootstrap Tabs - Next and previous

I have an issue with my Bootstrap Tabs.
I defined a scrollTop function on next button. The scrolling is working fine but the tab is jumping from 1 to 3.
My JS code:
<script>
$('.btnNext').click(function(){
$('html, body').animate({
scrollTop: jQuery(".expect").offset().top
}, 800,
function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
);
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
HTML Code :
<div class="step-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab1" role="tab">STAP 01</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">STAP 02</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab3" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab6" role="tab">STAP 03</a>
</li>
</ul>
</div>
<div class="step-panes">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tab1" role="tabpanel">
<p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br>XXXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2" role="tabpanel">
<p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab3" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab4" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab5" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab6" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
</div>
</div>

This particular code is causing the issue (taking Skelly's approach)
$('html, body').animate({
scrollTop: jQuery(".expect").offset().top
}, 800,
I am unable find a reason why the above code causes the skip jump. But I do have solution which resolves this.
JS
$(document).ready(function() {
$('.step-tabs').on('click', function() {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 800);
});
});
$('.btnNext').click(function() {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
P.S - If anyone can explain the reason why his code wasn't working, I'll be able to die peacefully.
WORKING BOOTPLY

Categories