I use Bootstrap tabs and have a problem with forms when Names of Checkboxes are the same. Checkbox is not displayed in the other form. If to use 2 forms in the first tab everything goes well
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="ExportFSAClaims" role="tab" data-toggle="tab">
tab1
</a>
</li>
<li role="presentation">
<a href="#tab2" aria-controls="ExportFSABalances" role="tab" data-toggle="tab">
tab2
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<form action="url1" method="POST">
<input type="checkbox" name="IsTerminated" />
</form>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<form action="url2" method="POST">
<input type="checkbox" name="IsTerminated" />
</form>
</div>
</div>
</div>
Related
I am working on a website, the navigation list of the website is in the picture. If I go to the page number 1, other pages are also shown as selected. But if I go to the page number 2 there is no problem.
Here is the code for navigation list. The list items shown as selected have different file names. How a list item now that it is selected ?
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="../index.php">
<i class="ti-dashboard menu-icon"></i>
<span class="menu-title">Ana Sayfa</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#kullanicilar" aria-expanded="false"
aria-controls="kullanicilar">
<i class="ti-id-badge menu-icon"></i>
<span class="menu-title">Kullanıcılar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="kullanicilar">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kullanicilari-listele.php">Kullanıcılar</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-olustur.php">Kullanıcı
Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-istatistikleri-listele.php">Kullanıcı
İstatistikleri</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#workouts" aria-expanded="false"
aria-controls="workouts">
<i class="ti-gallery menu-icon"></i>
<span class="menu-title">Antrenmanlar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="workouts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="antrenmanlari-listele.php">Antrenmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="antrenman-olustur.php">Antrenman Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="egzersizleri-listele.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#pilates" aria-expanded="false"
aria-controls="pilates">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">Pilates</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="pilates">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#yoga" aria-expanded="false"
aria-controls="yoga">
<i class="ti-eye menu-icon"></i>
<span class="menu-title">Yoga</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="yoga">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersiz-olustur.php">Tekil Egzersiz Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#streching" aria-expanded="false"
aria-controls="streching">
<i class="ti-hand-open menu-icon"></i>
<span class="menu-title">Streching</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="streching">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-seti-olustur.php">Yeni Egzersiz Seti</a></li>
<li class="nav-item"><a class="nav-link" href="kstreching-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="streching-tekil-egzersiz-olustur.php">Yeni Egzersiz</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#sporKategorileri" aria-expanded="false"
aria-controls="sporKategorileri">
<i class="ti-star menu-icon"></i>
<span class="menu-title">Kategoriler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="sporKategorileri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kategorileri-listele.php">Kategoriler</a></li>
<li class="nav-item"><a class="nav-link" href="kategori-olustur.php">Yeni Kategori Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#egzersizEkipmanlari" aria-expanded="false"
aria-controls="egzersizEkipmanlari">
<i class="ti-basketball menu-icon"></i>
<span class="menu-title">Egzersiz</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="egzersizEkipmanlari">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="egzersiz-ekipmanlari-listele.php">Ekipmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="egzersiz-ekipmani-olustur.php">Yeni Ekipman
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#vucutBolgeleri" aria-expanded="false"
aria-controls="vucutBolgeleri">
<i class="ti-heart menu-icon"></i>
<span class="menu-title">Vücut Bölgeleri</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="vucutBolgeleri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="vucut-bolgeleri-listele.php">Vücut Bölgeleri</a></li>
<li class="nav-item"><a class="nav-link" href="vucut-bolgesi-olustur.php">Vücut Bölgesi
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#urunler" aria-expanded="false"
aria-controls="urunler">
<i class="ti-package menu-icon"></i>
<span class="menu-title">Ürünler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="urunler">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="urunleri-listele.php">Ürünler</a></li>
<li class="nav-item"><a class="nav-link" href="urun-olustur.php">Yeni Ürün Oluştur</a>
</li>
<li class="nav-item"><a class="nav-link" href="urun-istatistikleri-listele.php">Ürün
İstatistikleri</a></li>
</ul>
</div>
</li>
</ul>
</nav>
'''
This is the page number 1
<?php
ob_start();
session_start();
if (!isset($_SESSION["login"])) {
header("Location: ../login.php");
} else {
include "veritabani/baglanti.php";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Online Gym Fitness Mobil Uygulama Yönetim Paneli</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../vendors/base/vendor.bundle.base.css">
<!-- endinject -->
<!-- inject:css -->
<link rel="stylesheet" href="../css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../images/favicon.png"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../js/repeater.js" type="text/javascript"></script>
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
<a class="navbar-brand brand-logo mr-xl-5" href="../index.php"><img src="../images/logo.png" class="mr-2"
alt="logo"/></a>
<a class="navbar-brand brand-logo-mini" href="../index.php"><img src="../images/logo-mini.png" alt="logo"/></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="ti-view-list"></span>
</button>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
<img src="../images/faces/user.png" alt="profile"/>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
<a class="dropdown-item" href="veritabani/logout.php">
<i class="ti-power-off text-primary"></i>
Logout
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
data-toggle="offcanvas">
<span class="ti-view-list"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../partials/_sidebar.html -->
<?php
include "navbar.html";
?>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-lg-9 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Yeni Tekil Egzersiz</h4>
<p class="card-description">
Yeni Tekil Egzersiz Oluşturma Formu
</p>
<form method="post" name="egzersizOlusturmaFormu" id="egzersizOlusturmaFormu"
class="forms-sample">
<div class="form-group">
<label for="egzersizBasligi">Egzersiz Başlığı</label>
<input type="text" class="form-control" id="egzersizBasligi"
name="egzersizBasligi"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAltBaslik">Egzersiz Alt Başlık</label>
<input type="text" class="form-control" id="egzersizAltBaslik"
name="egzersizAltBaslik"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAciklama">Egzersiz Açıklama</label>
<input type="text" class="form-control" name="egzersizAciklama"
id="egzersizAciklama"
required="required">
</div>
<div class="form-group">
<label for="egzersizPremium">Premium içerik mi ?</label>
<select class="form-control form-control"
name="egzersizPremium" id="egzersizPremium">
<option value="1">Evet</option>
<option value="0">Hayır</option>
</select>
</div>
<div class="form-group">
<label for="egzersizVideoUrl">Video Embed Url</label>
<input type="text" class="form-control"
name="egzersizVideoUrl" id="egzersizVideoUrl"
required="required">
</div>
<div class="form-group">
<label for="egzersizPopularite">Popülarite Skoru</label>
<input type="text" class="form-control"
name="egzersizPopularite" id="egzersizPopularite">
</div>
<div class="form-group">
<label for="egzersizEkipmanKategorisi">Ekipman Kategorisi</label>
<select class="form-control form-control" name="egzersizEkipmanKategorisi"
id="egzersizEkipmanKategorisi">
<?php
$sorgu = "SELECT name,id FROM equipments ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($equipment = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $equipment['id'] . "'>" . $equipment["name"] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizSporKategorisi">Kategori</label>
<select class="form-control form-control" name="egzersizSporKategorisi"
id="egzersizSporKategorisi">
<?php
$sorgu = "SELECT name,id FROM categories ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($sport = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $sport['id'] . "'>" . $sport['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizVucutBolgesi">Vücut Bölgesi</label>
<select class="form-control form-control" name="egzersizVucutBolgesi"
id="egzersizVucutBolgesi">
<?php
$bodyPartsSql = "SELECT name,id FROM body_parts ORDER BY name DESC";
$bodyParts = mysqli_query($baglanti, $bodyPartsSql) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($bodyParts) {
while ($part = mysqli_fetch_assoc($bodyParts)) {
echo "<option value='" . $part['id'] . "'>" . $part['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizZorlukDerecesi">Egzersiz Zorluk Derecesi</label>
<select class="form-control form-control"
name="egzersizZorlukDerecesi" id="egzersizZorlukDerecesi">
<option value="1">Çok Kolay</option>
<option value="2">Kolay</option>
<option value="3">Orta</option>
<option value="4">Zor</option>
<option value="5">Çok Zor</option>
</select>
</div>
<div class="form-group">
<label for="egzersizOrtalamaSure">Egzersiz Ortalama Süresi (Dakika)</label>
<input type="text" class="form-control form-control"
name="egzersizOrtalamaSure" id="egzersizOrtalamaSure"
required="required">
</div>
<div class="form-group">
<label for="egzersizSetTipi">Setler Tekrarlı mı Süreli mi ?</label>
<select class="form-control form-control"
name="egzersizSetTipi" id="egzersizSetTipi">
<option value="1">Tekrarlı</option>
<option value="2">Süreli</option>
</select>
</div>
<div id="repeater">
<div class="repeater-heading" align="right">
<button type="button" class="btn btn-primary repeater-add-btn">Set Ekle
</button>
</div>
<div class="items" data-group="exercise_sets">
<div class="item-content">
<div class="row">
<div class="form-group" style="margin-left: 15px">
<label>Tekrar Sayısı/Süresi (Saniye) </label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="tekrarSayilari[]"
>
</div>
<div class="form-group" style="margin-left: 20px">
<label>Dinlenme Süresi (Saniye)</label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="dinlenmeSureleri[]"
>
</div>
<div class="col-lg-2" style="margin-top:30px;" align="center">
<button id="remove-btn"
onclick="$(this).parents('.items').remove()"
class="btn btn-danger">Sil
</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Tanıtım Görseli Yükle</label>
<input type="file" name="egzersizTanitimGorseli"
id="egzersizTanitimGorseli"
class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info"
required="required"
disabled="">
<span class="input-group-append">
<button class="file-upload-browse btn btn-primary" type="button">Görsel Seç</button>
</span>
</div>
<img id="gorsel_preview">
</div>
<div style="margin-top: 20px">
<button type="submit" class="btn btn-primary mr-2">ONAYLA</button>
<button type="reset" class="btn btn-light">İPTAL</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../vendors/base/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../js/off-canvas.js"></script>
<script src="../js/hoverable-collapse.js"></script>
<script src="../js/template.js"></script>
<script src="../js/todolist.js"></script>
<script src="../js/file-upload.js"></script>
<script src="../js/repeater.js"></script>
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$('#egzersizOlusturmaFormu').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'veritabani/egzersiz-kayit.php', // Verileri Post Ettiğimiz dosya adı
type: 'POST', // Form Metodumuz
data: new FormData(this), // Form ile gelen verilerimiz
contentType: false,
processData: false,
beforeSend: function () {
// Form Post edildikten sonra yapılacak işlem
// $('#result').html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;"><span class="sr-only">Lütfen Bekleyiniz....</span></div></div>');
},
success: function (data) {
// veritabani/etkinlik-ekle.php dosyamıza verilerin gönderildikten sonra işlem başarılı ise upload.php ile gelen sonuç değerini yazdıracağımız satır
alert(data);
$('#egzersizOlusturmaFormu')[0].reset(); // İşlem başarılı olduktan sonra formu sıfırlar
}
});
});
</script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#gorsel_preview').attr('src', e.target.result).attr('style', 'margin-bottom: 25px; margin-top: 25px; height: 150px; width: 150px');
};
reader.readAsDataURL(input.files[0]);
}
}
$("#egzersizTanitimGorseli").change(function () {
readURL(this);
});
</script>
<script>
$(document).ready(function () {
$('#repeater').createRepeater();
});
</script>
<!-- endinject -->
</body>
</html>
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.).
I'm making a multi-page form in Angular using nav-tabs and tab-content. I can switch between tabs, but content is not shown in any of the tabs. Before I added the fade to the tab-panes, the content of step 1 was shown in every step, so the fade might be one of the problems, but not the only one I think... Below is my code, any help is appreciated!
I got the html from this site: https://getbootstrap.com/docs/4.4/components/navs/#tabs
It would be amazing if it were possible to do these tabs and the links to them all in the same url (so not changing it), so if anyone knows how to do that (if it is possible), then you're amazing!
<nav>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="step1" data-toggle="tab" href="infotemplate/#step1" role="tab" aria-controls="step1" aria-selected="true">Step 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="step2" data-toggle="tab" href="infotemplate/#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" role="tabpanel" id="step1" aria-labelledby="step1">
<form [formGroup]="basicsform">
<div>
<div class="required-field">Full name:</div>
<input type="text" formControlName="name" placeholder="Full name">
</div>
<div>
Label:
<input type="text" formControlName="label" placeholder="Label">
</div>
<div>
<div class="required-field">E-mail:</div>
<input type="email" formControlName="email" placeholder="E-mail">
</div>
<div>
URL to picture:
<input type="url" formControlName="picture" placeholder="Picture URL">
</div>
<div>
<div class="required-field">Phone number:</div>
<input type="text" formControlName="phone" placeholder="Phone number">
</div>
<div>
URL to website:
<input type="url" formControlName="website" placeholder="Website URL">
</div>
<div>
Summary:
<input type="text" formControlName="summary" placeholder="Summary">
</div>
<div formGroupName="location">
<h6>Location</h6>
<div>
<div class="required-field">Address:</div>
<input type="text" formControlName="address" placeholder="Address">
</div>
<div>
<div class="required-field">City:</div>
<input type="text" formControlName="city" placeholder="City">
</div>
<div>
<div class="required-field">Postal Code:</div>
<input type="text" formControlName="postalCode" placeholder="Postal code">
</div>
<div>
<div class="required-field">Country code:</div>
<input type="text" formControlName="countryCode" placeholder="Country code">
</div>
<div>
Region:
<input type="text" formControlName="region" placeholder="Region">
</div>
</div>
</form>
</div>
<div class="tab-pane fade" role="tabpanel" id="step2" aria-labelledby="step2">
<form [formGroup]="basicsform">
<div formArrayName="profiles" *ngFor="let profile of basicsform.get('profiles').controls; let i = index;">
<div [formGroupName]="i">
<em><b>Profile {{i + 1}}:</b></em>
<div class="required-field">Network:</div>
<input type="text" formControlName="network" placeholder="Network">
<div class="required-field">Username:</div>
<input type="text" formControlName="username" placeholder="Username">
<div class="required-field">URL:</div>
<input type="text" formControlName="url" placeholder="URL"><br>
<button (click)="deleteProfile(i)">Delete Profile {{i+1}}</button><br>
</div><br><br>
</div><br>
<div><button (click)="addProfile()" [disabled]="basicsform.get('profiles').invalid">Add
profile</button></div><br>
</form>
</div>
Here is working code! Check in your application.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">tab 1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">tab 2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">tab 3</div>
</div>
I've incorporated bootstrap tabs into my web app following the documentation on the bootstrap website.
I've so far managed to get the first tab fade animation to play and show the the other two tabs don't seem to work and I'm quite stumped as to why.
<div id="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li id="dashboardTab" class="nav-item">
<a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a>
</li>
<li id="usersTab" class="nav-item">
<a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a>
</li>
<li id="wholesalerTab" class="nav-item">
<a class="nav-link" id="wholesalerCreate-tab" data-toggle="tab" href="#wholesalerCreate" role="tab" aria-controls="wholesalerCreate" aria-selected="false">Wholesalers<span onclick="onCloseTabButtonClick(1)">X</span></a>
</li>
</ul>
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<iframe class="iframe-size" id="dashboardHolder" src="Dashboard.aspx" />
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<iframe class="iframe-size" src="UserCreate.aspx" />
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<iframe class="iframe-size" src="WholsalerCreate.aspx" />
</div>
</div>
</div>
</div>
</div>
Alot of similar questions I've read show that the error is simply not importing the Jquery and the bootstrap js files.
<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
I have got this in my header and do believe it's working.
Tabs do not work well with Iframes. So remove them. It is also a better user experience.
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<div class="iframe-size">
...
</div>
</div>
</div>
I have a problem editing an HTML page. I need to change the content on the second tab on the nav-tabs, the one with the name Anexos. I tried to create a new href, but this didn't work. What do I need to do?
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#adm_carteiras">Formulário</a></li>
<li><a data-toggle="tab" href="#utilizacao">Anexos</a></li>
<li><a data-toggle="tab" href="#utilizacao">Versões</a></li>
</ul>
<div class="tab-content">
<div id="adm_carteiras" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<div class="filtrar_cliente box" style="padding-bottom:25px;">
<div class="box_conteudo">
<div class="box_conteudo">
<h1 class="title_box">Solicitação de Viagem</h1>
<div class="adm_carteiras box">
<div class="box_conteudo">
<h4>Nome do Solicitante:</h4><br>
</div>
</div>
this is the correct bootstrap nav-tabs structure
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>