Bootstrap tabs not containing carousel widget data correctly? - html

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 :)

Related

Bootstrap Nav-pills not working correctly

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

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

creating html nav-tabs dynamic in angular 6

I am very new to angular 6, I have created tabs in HTML and I need to convert it in angular 6 and also make it dynamic. below is my HTML code-
<ul class="nav nav-tabs side_nav" role="tablist">
<li role="presentation" class="dashboard_li active">
</li>
<li role="presentation" class="dashboard_li">
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
I have converted it angular 6, below is my angular code -
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = coinwallet" aria-controls="one" role="tab" data-toggle="tab"></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
Now I have two pints here -
1- how would I make tab-content dynamic according to tabs
2- Currently tabs are not working, as I am changing from one tab to another tab, tab-content always remain same, it's not changing according to the tab.
Any help would be appreciated. Thanks in advance.
you need to show/hide tab-content using *ngIf angular directive
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = wallet" aria-controls="one" role="tab" data-toggle="tab">{{wallet}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="selectedwallet === coinwallet[0]" role="tabpanel" class="tab-pane active" id="one">wallet 1 content</div>
<div *ngIf="selectedwallet === coinwallet[1]" role="tabpanel" class="tab-pane active" id="two">wallet 2 content</div>
</div>
.ts:
coinwallet: string[] = ['wallet1','wallet2'];
selectedwallet = this.coinwallet[0];
check working code here
I think rather than converting HTML tabs to Angular, You can directly user ng-bootstrap components which works very well with Angular and comes with lot of configurable options. below is a link for ng-bootstrap tabs
https://ng-bootstrap.github.io/#/components/tabs/examples

Targeting a bootstrap 4 tab panel from another page

I want to open a tab panel on say a service.html page when i click a link on my index page. I'm working with bootstrap nav-pills and here's part of what I have tried already which didn't work.
service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Support</a>
</li>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Manpower Support</h5>
</div>
</div>
This is the link in my index.html file
Manpower
At the moment, this will only take me to the default services page but will not open the tab content which is what i want. What's the correct way to implement this?
Add the following code in your service.html
$(function(){
var tabPanelId = window.location.hash.substr(1).trim();
// tabPanelId will give your "v-pills-manpower" id
$("#"+tabPanelId").click();
});

Two tabs displaying same tab-content with unique ID values in Bootstrap 4

I'm using Python Flask, Jinja 2 and Boostrap 4 for developing a simple web tool but I'm stuck on a weird issue that I believe must be a linkage error between the "nav-item" and a "tabpanel" but for the life of me I can't seem to find the problem. Below is the code I'm using for the tabs in HTML.
<div id="tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#m-tab" role="tab">M</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#g-tab" role="tab">G</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href= "#p-tab" role="tab">P</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="m-tab" role"tabpanel">
....... <!-- Content -->
</div>
<div class="tab-pane" id="g-tab" role="tabpanel">
....... <!-- Content -->
</div>
<div class="tab-pane" id="p-tab" role="tabpanel">
....... <!-- Content -->
</div>
</div>
The first two tabs, m-tab and g-tab, work perfectly, but when I select the p-tab the content displayed does not change from the g-tab tabpanel. It seems that both the second and third tab are displaying the same content as the url updates to show which tab is active and that part correctly reflects the selection I make.
I have to be missing something simple but I need a second pair of eyes!
Any and all help is greatly appreciated!
Thanks ahead!