Bootstrap Nav-pills not working correctly - html

I am using one main nav-menu and then a second nav-menu, the content for all these are within the same div.
Once I enter the page, Profile is active on default which is correct, I can then enter Test which then becomes active, as expected.
However, once I click on Edit both Edit and the last nav-item inside the Main Nav-menu is active.
Edit then remains active, despite clicking on Profile or Test. This means I have to refresh the page to remove the active-state and in order to see the content inside Edit again.
Any suggestions on what's wrong with this structure?
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span></a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span></a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>

In BS4 a button becomes active when the ACTIVE class is added to it.
Inside the nav tag, the "profile" button is activated by default and when you press the "test" button, "profile" button turns off, assigning the ACTIVE class to test. In this way you can show which menu is active each time.
However "Edit info" is in another nav, where this button is the only element. That's why you have no way to turn it off since there is no other button that turns on and off the previous one.
This operation is typical of the navs in BS4 and is done automatically by means of a javascript code.
To turn off ACTIVE you must delete the ACTIVE class.
The simplest thing is to do it by means of a javascript that is activated when an event occurs.
I leave you an example where when pressing the button "shutdown" the javascritp is activated and the ACTIVE class is eliminated.
This can be associated with a button or any other event that calls this function.
The code could be the following
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul id="1" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link apagar">
<span>apagar</span>
</a>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul id="2" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span>
</a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>
<script>
$(function() {
$(".apagar").click(function() {
$(".edit").removeClass('active');
});
});
</script>
Good luck

Related

Bootstrap tabs not containing carousel widget data correctly?

Bootstrap: 3.4.1
Jquery: 3.4.1
Site page in question:
http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823
I built a bootstrap feature for a site a couple years ago in the Scalar CMS that is supposed to contain three seperate caroursels in tabs that you can toggle between (essentially there is only supposed to be one carousel on the page at a time depednding on the active tab).
I went back to the site and the tab buttons didn't work and all three carousels were being shown for all the pages using them.
I constructed the tabs in the content area in the Scalar page editer by adding the following html in 'Source' mode (taken from https://getbootstrap.com/docs/3.4/javascript/#markup):
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel"><a class="inlineWidget inline" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div class="tab-pane fade" id="#menu2" role="tabpanel"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-claims-of-james-brooks---page-1,the-claims-of-james-brooks---page-2,the-claims-of-james-brooks---page-3" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div role="tabpanel" class="tab-pane fade" id="menu3"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-testimonies-for-james-brooks---page-1,the-testimonies-for-james-brooks---page-2,the-testimonies-for-james-brooks---page-3,the-testimonies-for-james-brooks---page-4,the-testimonies-for-james-brooks---page-5,the-testimonies-for-james-brooks---page-6,the-testimonies-for-james-brooks---page-7,the-testimonies-for-james-brooks---page-8,the-testimonies-for-james-brooks---page-9,the-testimonies-for-james-brooks---page-10,the-testimonies-for-james-brooks---page-11,the-testimonies-for-james-brooks---page-12,the-testimonies-for-james-brooks---page-13,the-testimonies-for-james-brooks---page-14" data-caption="none" name="scalar-inline-widget">test</a>
</div>
</div>
</div>
Where I think the issue lies is when I hit 'Save and view' in the editor: the CMS builds the page with a lot more element tags that mess with the nesting of my custom html. For whatever reason, the data in the tab panes (which gets created when you make a carousel in the editer) is getting placed outside the container and into a completely seperate :
<div class="paragraph_wrapper">
<div class="body_copy">
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<!-- outside??? -->
<a class="inlineWidget inline widget_link" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget" style="display: none;"></a>
<!-- widget for first carousel, duplicated? -->
<div class="widget_slot full_widget widget_carousel left_slot">...</div>
<!-- repeats this pattern for all three carousels -->
In the past, the whole widget element was contained in the right area, but now it assumes this behavior...I have all the bootstrap and jquery files included as well. Maybe there is a way to maipulate the DOM to put all the "widget_slot full_widget widget_carousel left_slot" stuff in the tabs at build time? Any and all suggestions/feedback are much appreciated :)

Is it possible to have a navbar on bootstrap cards when they are dynamically created?

I'm working on a website where I have multiple cards representing a product. I want to have tabs on the top of each card so that the user can see more details; however, when I try doing this, no matter which card I click the tab on, only the very first one changes. I think it is because of the id and aria-controls is the same on each one due to the loop, but I do not know how to fix this. Please help.
UPDATE:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card border-dark mb-3 mx-auto text-center" *ngFor="let p of products">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id='product-tab' data-toggle='tab' role="tab" aria-controls="product" aria-selected="true" href="#product">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" id='user-tab' data-toggle='tab' role="tab" aria-controls="user" aria-selected="false" href="#user">User</a>
</li>
<li class="nav-item">
<a class="nav-link" id='details-tab' data-toggle='tab' role="tab" aria-controls="details" aria-selected="false" href="#details">Details</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">
<h5 class="card-title">{{p.name}}</h5>
<div role="separator" class="dropdown-divider"></div>
<h6 class="card-subtitle">
<i>{{p.location}} | {{p.quantity}} available</i>
<br>
<small class="text-muted">Uploaded {{p.datePosted | date}}</small>
</h6>
<div role="separator" class="dropdown-divider"></div>
<p class="card-text">{{p.description}}</p>
</div>
<div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
<h5 class="card-title">{{p.userName}}</h5>
<hr>
<h6 class="card-subtitle">
Contact Information:
</h6>
{{p.phone | phone}} {{p.email}}
<hr>
<h6 class="card-subtitle">
Bell Id:
</h6>
{{p.employeeNumber}}
</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">{{p.datePosted}}</div>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-outline-primary" (click)='rejectProduct(p.id)' [routerLink]="['/admin/products']">REJECT</button>
<button type="button" class="btn btn-outline-primary" (click)='approveProduct(p.id)' [routerLink]="['/admin/products']">APPROVE</button>
</div>
</div>
First, remember to include the Bootstrap javascript files if you have not done so already (they are not present in your code example).
Assuming you have the correct Bootstrap files linked, you'll need to give your elements unique IDs on each loop so that your tabs will call the correct tab pane content. To do this, simply declare a variable in the script that generates the cards and append it to the ID in each loop (e.g. id="product-tab-0", id="product-tab-1", etc.).

What is wrong with my Bootstrap data-toggle implementation?

So I'm trying to implement a data toggle using bootstrap 4.2.1. Following the documentation, I came up with the following code:
<div class="container">
<div class="row bottom-section position-relative">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link nav-team active text-center" id="team-tab" data-toggle="tab" data-target="#team" aria-controls="team" role="tab" aria-selected="true">Team</a>
</li>
<li class="nav-item">
<a class="nav-link nav-individual text-center" id="individual-tab" data-toggl="tab" data-target="#individual" aria-controls="individual" role="tab" aria-selected="false">Individual</a>
</li>
</ul>
<div class="bottom-section-content col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="team" role="tabpanel" aria-labelledby="team-tab"><p>asd</p></div>
<div class="tab-pane" id="individual" role="tabpanel" aria-labelledby="individual-tab"><p>sad</p></div>
</div>
</div>
</div>
</div>
I cant't figure out what is wrong, it should be working like this. Am I missing something with the bootstrap js?
I used your code and found that if you are using 4.1.3, this implementation will not work with your current HTML. You have to upgrade your JS to Bootstrap 4.2.1.
Use: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js
Also #elveti is right you misspelled data-toggle.
Working Example using (4.2.1): https://codepen.io/brooksrelyt/pen/zeNVxo

Nested tabs in a pill tab panel not working in Bootstrap

I'm having trouble getting tabs inside of a vertical pill tab panel to work correctly in Bootstrap 4.
Here's a minimal code example:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="popper.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<div class="row">
<div class="col-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" data-toggle="pill" href="#v-pills-1" role="tab">Pill 1</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-2" role="tab">Pill 2</a>
<a class="nav-link" data-toggle="pill" href="#v-pills-3" role="tab">Pill 3</a>
</div>
</div>
<div class="col-10">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-1" role="tabpanel">
Pill 1 content
<!-- tabs
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active show" id="tabs-1" role="tabpanel">Tab 1 content</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">Tab 2 content</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">Tab 3 content</div>
</div>
-->
</div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel">Pill 2 content</div>
<div class="tab-pane fade" id="v-pills-3" role="tabpanel">Pill 3 content</div>
</div>
</div>
</div>
</body>
</html>
The webpage functions correctly, that is the vertical pills work as expected. Once you uncomment the section that gives the first vertical pill a nested tab, the pills do not function correctly. Clicking on Pill 2 and then Pill 3 will results in the content for both pills to be shown.
Why doesn't this work and how can I fix it?
This is a bug in version 4.0.0-beta. It is fixed in version 4.0.0-beta.2:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

HTML navigation tabs doesn't work

Hi I have complication regarding on bootstrap. My code doesn't work is there something wrong? any idea to solve the problem?--thanks
<nav id='nav-reservation'>
<div class="container">
<ul class="nav nav-tabs">
<a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a>
<a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a>
</ul>
</div>
<div class="tab-content">
<div id="room" class="tab-pane fade in active"></div>
<div id="equipment" class="tab-pane fade in active"></div>
</div>
</nav>
You forgot to add li tag in ul tag.
<nav id='nav-reservation'>
<div class="container">
<ul class="nav nav-tabs">
<li> <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a></li>
<li> <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a></li>
</ul>
</div>
<div class="tab-content">
<div id="room" class="tab-pane fade in active"></div>
<div id="equipment" class="tab-pane fade in active"></div>
</div>
The first thing is that you have both of your tab content pane's with the in active classes on them and the only one that should have these classes is the active open pane. Having both of these with the in active classes will show both of the tabs at the same time.
Next the tabs are activated by a hashtag in the href of the nav tabs. And you have no hashtag. They should correspond with the tab pane that you want to open. So if you want to open the tab with the id #room in the href in the nav tabs you should specify this. Also you should put the data-toggle="tab" in the href as well like so:
<a data-toggle="tab" href="#room">Room</a>
This will open the tab with the id #room
So your markup should look something like the following without your custom php:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#room">Room</a></li>
<li><a data-toggle="tab" href="#equipment">Equipment</a></li>
</ul>
<div class="tab-content">
<div id="room" class="tab-pane fade in active">
First Tab
</div>
<div id="equipment" class="tab-pane fade">
Second Tab
</div>
</div>