I have two widgets in a row with 6columns each. I have written code for dynamically populating one widgets and i wish to add that widget in the home dashboard. I need it to load the content of that particular div on the go of the page load.I had written that div in seperate file to be used in multiple places. So i want to know how to load that div in my html. I have here mentioned the code here below of my 'main.html' which contains two 6 columns and i wanted to populate the first 6 column with other.html file which contains angular div.
<!-- WIDGETS SPACE, PLACE SOME UIKITS HERE OR MAKE YOUR OWN KITS ;) -->
<div class="row">
<div class="col-md-6">
<!-- UPCOMMING NEW TESTS -->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
View all Test
</div>
<h3 class="panel-title">Upcoming Test New Tests</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase 4 items ($80)</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Rose Davies</small>
<small><i class="fa fa-user fa-fw"></i> 16 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces2.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Dilara Elmas</small>
<small><i class="fa fa-user fa-fw"></i> 20 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces3.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Payment for invoice #141213</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> George Florianu</small>
<small><i class="fa fa-user fa-fw"></i> 42 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces4.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Gustavo Francisco</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces5.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Bastien Guichard</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
</div>
<div class="col-md-6">
<!-- TOP RANK (users, items or others) KIT -->
<div class="panel panel-default">
<div class="panel-body">
<h3 class="panel-title">Weekly list of Toppers
<br>
<small class="text-muted">Updated at 07:16 am</small>
</h3>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces11.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Emma Greene</h5>
<div class="progress progress-md">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 8.33%">
<div class="progress-text">0 Right Answers</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces12.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Júlia Márta</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 74.8%">
<div class="progress-text">1,122 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces13.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Tom Bonnet</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 69.27%">
<div class="progress-text">1,039 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces14.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Naia Gómez</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 64.8%">
<div class="progress-text">972 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces15.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Gary Lewis</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 58.73%">
<div class="progress-text">881 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<br>
<!--Just line-->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- /END TOP RANK KIT -->
</div>
<!-- /.cols -->
</div>
<!-- /.row -->
</div>
The other.html contains the below code.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
View all Test
</div>
<h3 class="panel-title">Upcoming Test</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media" ng-repeat="item in testList track by $index">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>Going To Attend Test
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">{{item.title}}</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i>{{item.questionPoster}}</small>
<small><i class="fa fa-user fa-fw"></i> {{item.timePosted}}</small>
</div>
</div>
<hr>
<!-- /.media-body -->
</div>
<!-- /.media -->
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
{{variable}}
</div>
</div>
Related
Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
<div class="col-11 col-lg-7 text-center">
<div class="nav btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week" type="button" role="tab" aria-selected="true">1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks" type="button" role="tab" aria-selected="false">2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks" type="button" role="tab" aria-selected="false">3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks" type="button" role="tab" aria-selected="false">4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks" type="button" role="tab" aria-selected="false">More Weeks</a>
</div>
</div>
$ 90 /first week
$ /two weeks
$ /three weeks
<!-- four -->
<div class="tab-pane fade" id="four-weeks" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
In the nav bar nav-tabs, the data attribute data-bs-target has to have to element id of the target tab-pane.
You had a different id.
Below is the fixed code:
<div class="col-11 col-lg-7 text-center">
<div class="nav nav-tabs btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week1" type="button" role="tab" aria-selected="true" aria-controls="one-week1" >1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks1" type="button" role="tab" aria-selected="false" aria-controls="two-weeks1" >2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks1" type="button" role="tab" aria-selected="false" aria-controls="three-weeks1" >3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks1" type="button" role="tab" aria-selected="false" aria-controls="four-weeks1" >4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks1" type="button" role="tab" aria-selected="false" aria-controls="nav-home" >More Weeks</a>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
Here is my index.html page created by using Bootstrap 4.Here in 'Reserve Table Using modal' should only trigger only the modal which is for reserving table.But the whole page after the jumbotron went inside the modal.There is no custom jquery or javascript function added other than one script for tooltip.How's the fix?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#Navbar">
<span class="navbar-toggler-icon"> </span>
</button>
<a href="#" class="navbar-brand mr-auto">
<img src="img/logo.png" height="30" width="41" alt="logo.png">
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="./index.html" class="nav-link">
<span class="fa fa-home fa-lg"></span> Home </a> </li>
<li class="nav-item"><a href="./aboutus.html" class="nav-link">
<span class="fa fa-info fa-lg"></span> About </a></li>
<li class="nav-item"><a href="#" class="nav-link">
<span class="fa fa-list fa-lg"></span> Menu </a></li>
<li class="nav-item"><a href="./contactus.html" class="nav-link">
<span class="fa fa-address-card fa-lg"></span> Contact </a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal" >
<span class="fa fa-sign-in"> </span> Login
</a>
</span>
</div>
</div>
</nav>
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Login
</h4>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail" >
Email Address
</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail" placeholder="Enter Email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword" >
Password
</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword" placeholder="Enter Email">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input type="checkbox" name="" id="rememberMe" class="form-check-input">
<label for="rememberMe" class="form-check-label">Remember Me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-primary btn-sm ml-auto">
Sign In
</button>
<button type="button" class="btn btn-secondary btn-sm ml-1" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm-3 align-self-center" >
<img src="img/logo.png" class="img-fluid" alt="logo.png">
</div>
<div class="col-12 col-sm-3 align-self-center" >
<a class="btn btn-warning col-12 mb-2" href="#card" data-toggle="tooltip"
data-html="true"data-placement="bottom"
title="Or try to call us at <br><strong> +852 123456789</strong>" >
Reserve Table Using Internal Hyper Link
</a>
<a class="btn btn-warning col-12" href="" data-toggle="modal" data-target="#reserveTableModal">
Reserve Table Using Modal
</a>
</div>
</div>
</div>
</div>
</header>
<div class="modal fade" id="reserveTableModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header bg-warning">
<h3 class="modal-title text-white">Reserve a Table</h3>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<h5 class="col-md-2">
Section
</h5>
<div class="col-md-6 ">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success custom-btn" for="noSmoke">
<input type="radio" name="smokeZone" id="noSmoke" autocomplete="off" checked="checked" > Non-Smoking
</label>
<label class="btn btn-danger custom-btn" for="Smoke">
<input type="radio" name="smokeZone" id="Smoke" autocomplete="off"> Smoking
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="button" class="btn btn-secondary ml-1" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Reserve
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-content">
<div class="col">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-sm-block">
<h2 >
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam (pancake)
and Italian pizza, topped .</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-sm-block">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-sm-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin .
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"> </span>
</a>
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img src="img/uthappizza.png" alt="uthappizza.png" class="d-flex mr-3 img-thumbnail-align-self-center">
<div class="media-body">
<h2 class="mt-0">
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
<div class="media">
<img src="img/buffet.png" alt="buffet.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="media">
<img src="img/alberto.png" alt="alberto.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
<div class="media-body">
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin
chef
</p>
</div>
</div>
</div>
<div class="row row-content" id="card">
<div class="col-sm-8 col-12 offset-sm-2">
<div class="card">
<h3 class="card-header bg-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i> +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i> +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i> confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-align">
<a class="btn btn-social-icon btn-google" href="http://google.com/+">
<i class="fa fa-google-plus fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id=">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/">
<i class="fa fa-linkedin fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/">
<i class="fa fa-twitter fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-youtube"href="http://youtube.com/">
<i class="fa fa-youtube fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-envelope" href="mailto:">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
You forgot to close the form-group div inside the #card form.
...
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</div> <!-- This is the missing one -->
</form>
I'm having an issue with changing the font awesome icon when collapsing a row in card table.
How can I create this with javascript? That, when, I click on a row the icon is changed for the item that is collapsed, and for the one that is open.
I have the following code:
Icon for opening : fas fa-chevron-down
Icon when the row is closed : fas fa-chevron-right
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="list-group-item" id="headingOne">
<h5 class="mb-0">
<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Configure which userdata to show for voice interactions</label>
</label>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="card-block">
<li class="list-group-item">
<div>
<div class="card-block">
<div class="card-header">
<div class="row">
<div class="col-md-3"><b>Label</b></div>
<div class="col-md-3"><b>Userdata</b></div>
<div class="col-md-6 text-right">
<button type="button" data-toggle="modal" data-target="#optionModal" class="btn btn-default btn-sm"><i class="fa fa-plus-circle"></i> <b>Optie</b> toevoegen</button>
</div>
</div>
</div>
<div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingTwo">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Con</label>
</label>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingThree">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">ctions</label>
</label>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
</div>
What I have to far :
<script>
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent().parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
</script>
But it collapses for all the records, how to chance this for only the records that is open/closed.
You only need to go up 1 parent level...
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
https://www.codeply.com/go/ePRWZuEK2K
I am trying to use the Google Maps API inside of a Bootstrap tab. When the map is in the first tab it loads properly, but I have to move it to the second tab because of UI considerations. When I do that, the map doesn't complete it's loading. I am using a class called "appt-lo" to trigger the first tab to show active. If I move that class to the second tab, my map shows, otherwise, it does not. If you guys could maybe give me some ideas or point me in the right direction, I would deeply appreciate it.
Codepen: https://codepen.io/madjaybird/pen/YxJErx?editors=1000
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.madjaybird.com/Codepen/main.js"></script>
<link href="https://www.madjaybird.com/Codepen/main.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inline Online - The Online Appointment Scheduler for NM MVD</title>
<link rel="stylesheet" href="dist/styles/main.css">
<link href='https://fonts.googleapis.com/css?family=Palanquin:400,300,100,200,500,600,700' rel='stylesheet' type='text/css'>
</head>
<body class="intro wizard">
<div id="header" role="banner">
<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top justify-content-between">
<a class="navbar-brand" href="http://mvd.newmexico.gov"><span>MVD</span> NEW MEXICO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav flex-row ml-auto d-none d-flex">
<li class="nav-item pr-2 pt-2" id="time">15:00<span> minutes</span></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-calendar-month-0817.html"><i class="fas fa-home"></i> Admin Home</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-help.html"><i class="fas fa-question-circle"></i> Help</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-signin.html"><i class="fas fa-sign-out-alt"></i> Log Out</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row justify-content-center mt-6">
<div class=" card wizard-card">
<div class="wizard-header">
<h3>
<b>MAKE</b> YOUR APPOINTMENT<br>
</h3>
</div>
<ul class="justify-content-around nav nav-tabs nav-fill setup-panel">
<li class="nav-item"><a class="btn-default nav-link link appt-lo" href="#step-1">Appointment Type</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-2">Appointment Location</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-3">Date & Time</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-4">Add Appointment</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-5">Customer Information</a></li>
</ul>
<form role="form" action="" method="post">
<!-- Step 1: Appointment Type -->
<div class="row setup-content" id="step-1">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"> Select Your Appointment Type </h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<hr class="my-2">
<div class="row">
<div class="col">
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="card1 has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-id-card"></i>
</div>
<h6 class="mt-2">First Time <br>Driver's License</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-file-alt"></i>
</div>
<h6 class="mt-2">First TIme Title</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-search"></i>
</div>
<h6 class="mt-2">VIN Inspection</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-road"></i>
</div>
<h6 class="mt-2">Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fa fa-motorcycle"></i>
</div>
<h6 class="mt-2">Motorcycle <br>Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-shield-alt"></i>
</div>
<h6 class="mt-2">Fingerprinting</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"></h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2: Location -->
<div class="row justify-content-center setup-content" id="step-2">
<div class="col text-center mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<img src="dist/images/MVDlogo.png" alt="MVD NM logo" class="step2" width="80">
<h4 class="info-text"> Find an MVD Field Office near you.</h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="row my-4 mx-4">
<div class="col-sm-8">
<div class="thumbnail map-wrapper">
<div id="map-canvas">
<div id="map">
</div>
</div>
</div>
</div>
<div class="col-sm">
<div>
<div id="maps">
<p>To find an MVD Service Provider near you, enter your City or ZIP Code.</p>
<div class="form-group">
<label class="sr-only">City/ZIP Code</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
<div class="location text-left">
<h5><strong>Select Location:</strong></h5>
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada</div>
<div>Santa Fe, NM 87507</div>
<div>505-476-1599</div>
<div> Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 3: Date & Time -->
<div class="row setup-content" id="step-3">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-primary prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Select Date & Time </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="location text-center">
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada Santa Fe, NM 87507 </div>
<div>505-476-1599 Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
<hr class="mb-0">
<div class="row justify-content-center">
<div class="col-sm">
<p class="text-center">Please select the date and the time for your appointment.</p>
</div>
</div>
<div class="row mx-4">
<div class="col-sm mt-2">
<div class="form-group">
<label class="control-label">Date of Appointment: </label>
<input class="form-control date-picker" type="date" />
</div>
</div>
<div class="col-sm block_list_words mt-2">
<label class="control-label">Time of Appointment: </label>
<ul id="handle-1" class="list-unstyled">
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 2:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:30 pm<span class="float-right sortable-links"></span>
</li>
</ul>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 4: Add Appointment -->
<div class="row setup-content" id="step-4">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Make Another Appointment </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row justify-content-center ml-0 mt-4">
<div class="col text-center">
<p class="lead">Would you like to make another appointment?</p>
<p class=" mb-4"> If so, click the <b>MAKE ANOTHER APPOINTMENT</b> button below. If not, click <b>NEXT</b>.</p>
<button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='ui-wizard.html'">Make Another Appointment</button>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 5: Customer Information -->
<div class="row setup-content" id="step-5">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Enter Your Information </h4>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="mx-4">
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="firstName"> First Name</label>
<input name="firstname" type="text" class="form-control" id="firstName" placeholder="First Name" required>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="lastName"> Last Name</label>
<input name="lastname" type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Email</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Phone </label>
<input name="phone" type="tel" class="form-control" id="phone" placeholder="Phone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label> Driver's License Number</label>
<input name="dln" type="text" class="form-control" id="dln" placeholder="Driver's License Number">
</div>
</div>
</div>
</form>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="footer mt-5">
<img src="dist/images/inlineonline-logo.png" alt="In Line Online logo" width="250">
<p> Copyright © 2017 State of New Mexico</p>
</div>
<!-- SCRIPTS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDaUcFwmFZosg6lIjUQFolSsqp_Zd9GCw&callback=initMap"></script>
<!-- / SCRIPTS -->
</body>
</html>
Call google.maps.event.trigger(map, 'resize'); inside allNextBtn.click's callback function within a setTimeout seems to render the map completely on tab change.
//Next Button script
allNextBtn.click(function () {
//trigger map resize on tab select
setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},10)
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('ul.setup-panel li a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
Codepen url https://codepen.io/azs06/pen/RZeMWV?editors=0010
This is my full html of Tab section
<tab heading="Meta Data" id="heading_meta-data">
<div id="meta-data" class="row">
<div class="col-md-3 col-xs-3">
<!-- output -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">Sensor Output</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="outputCollapsed" ng-click="outputCollapsed=!outputCollapsed"><i ng-show="!outputCollapsed" class="fa fa-plus"></i><i ng-show="outputCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="outputCollapsed" class="box-body">
<!-- show ouput fields here -->
<!-- output field box starts here -->
<div ng-repeat="outpt in sensorDetails.metaData.output" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{outpt.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="ocollapsed" ng-click="ocollapsed=!ocollapsed"><i ng-show="!ocollapsed" class="fa fa-plus"></i><i ng-show="ocollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ocollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{outpt.name}}</small></li>
<li><b>type </b> : <small>{{outpt.type}}</small></li>
<li><b>unit </b> : <small>{{outpt.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- output field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- parameter -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">parameter</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="parameterCollapsed" ng-click="parameterCollapsed=!parameterCollapsed"><i ng-show="!parameterCollapsed" class="fa fa-plus"></i><i ng-show="parameterCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="parameterCollapsed" class="box-body">
<!-- parameter field box starts here -->
<div ng-repeat="param in sensorDetails.metaData.parameter" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{param.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="pcollapsed=!pcollapsed"><i ng-show="!pcollapsed" class="fa fa-plus"></i><i ng-show="pcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="pcollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{param.name}}</small></li>
<li><b>value</b> : <small>{{param.value}}</small></li>
<li><b>type </b> : <small>{{param.type}}</small></li>
<li><b>unit </b> : <small>{{param.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- parameter field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- identifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">identifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="identifierCollapsed" ng-click="identifierCollapsed=!identifierCollapsed"><i ng-show="!identifierCollapsed" class="fa fa-plus"></i><i ng-show="identifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="identifierCollapsed" class="box-body">
<!-- identifier field box starts here -->
<div ng-repeat="iden in sensorDetails.metaData.identifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{iden.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="icollapsed" ng-click="icollapsed=!icollapsed"><i ng-show="!icollapsed" class="fa fa-plus"></i><i ng-show="icollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="icollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{iden.name}}</small></li>
<li><b>value</b> : <small>{{iden.value}}</small></li>
<li><b>type </b> : <small>{{iden.type}}</small></li>
<li><b>unit </b> : <small>{{iden.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- identifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- classifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">classifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="classifierCollapsed=!classifierCollapsed"><i ng-show="!classifierCollapsed" class="fa fa-plus"></i><i ng-show="classifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="classifierCollapsed" class="box-body">
<!-- classifier field box starts here -->
<div ng-repeat="classi in sensorDetails.metaData.classifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{classi.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="ccollapsed=!ccollapsed"><i ng-show="!ccollapsed" class="fa fa-plus"></i><i ng-show="ccollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ccollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{classi.name}}</small></li>
<li><b>value</b> : <small>{{classi.value}}</small></li>
<li><b>type </b> : <small>{{classi.type}}</small></li>
<li><b>unit </b> : <small>{{classi.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- classifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- capability -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">capability</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="capabilityCollapsed=!capabilityCollapsed"><i ng-show="!capabilityCollapsed" class="fa fa-plus"></i><i ng-show="capabilityCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="capabilityCollapsed" class="box-body">
<!-- capability field box starts here -->
<div ng-repeat="capab in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{capab.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="cacollapsed" ng-click="cacollapsed=!cacollapsed"><i ng-show="!cacollapsed" class="fa fa-plus"></i><i ng-show="cacollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="cacollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{capab.name}}</small></li>
<li><b>value</b> : <small>{{capab.value}}</small></li>
<li><b>type </b> : <small>{{capab.type}}</small></li>
<li><b>unit </b> : <small>{{capab.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- capability field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- characteristics -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">characteristics</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="characteristicsCollapsed" ng-click="characteristicsCollapsed=!characteristicsCollapsed"><i ng-show="!characteristicsCollapsed" class="fa fa-plus"></i><i ng-show="characteristicsCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="characteristicsCollapsed" class="box-body">
<!-- characteristics field box starts here -->
<div ng-repeat="char in sensorDetails.metaData.characteristics" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{char.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="chcollapsed" ng-click="chcollapsed=!chcollapsed"><i ng-show="!chcollapsed" class="fa fa-plus"></i><i ng-show="chcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="chcollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{char.name}}</small></li>
<li><b>value</b> : <small>{{char.value}}</small></li>
<li><b>type </b> : <small>{{char.type}}</small></li>
<li><b>unit </b> : <small>{{char.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- characteristics field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- interface -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">interface</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="interfaceCollapsed" ng-click="interfaceCollapsed=!interfaceCollapsed"><i ng-show="!interfaceCollapsed" class="fa fa-plus"></i><i ng-show="interfaceCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="interfaceCollapsed" class="box-body">
<!-- interface field box starts here -->
<div ng-repeat="intrface in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{intrface.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="incollapsed" ng-click="incollapsed=!incollapsed"><i ng-show="!incollapsed" class="fa fa-plus"></i><i ng-show="incollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="incollapsed" class="box-body">
<!-- interface fields details -->
<ul>
<li><b>name</b> : <small>{{intrface.name}}</small></li>
<li><b>value</b> : <small>{{intrface.value}}</small></li>
<li><b>type </b> : <small>{{intrface.type}}</small></li>
<li><b>unit </b> : <small>{{intrface.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- interface field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- position global -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">position global</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="positionGlobalCollapsed" ng-click="positionGlobalCollapsed=!positionGlobalCollapsed"><i ng-show="!positionGlobalCollapsed" class="fa fa-plus"></i><i ng-show="positionGlobalCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="positionGlobalCollapsed" class="box-body">
<ul>
<li><b>altitude</b> : <small>{{sensorDetails.metaData.position_global.altitude}}</small></li>
<li><b>latitude</b> : <small>{{sensorDetails.metaData.position_global.location.lat}}</small></li>
<li><b>longitude </b> : <small>{{sensorDetails.metaData.position_global.location.lon}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
</tab>
In spec.js
var metaData = element(by.id('heading_meta-data')).click();
browser.wait(EC.presenceOf(metaData), 500);
metaData.click();
here the tab is not getting clicked..............
Please tell what could be the issue.............??????????
already increased the browser wait time but still no help.................................?????????
Wait for the presence of tab in the DOM using wait() function and then try to click it once the element is found. If the element is taking longer to be displayed, then increase the timeout in the wait() function. Here's how -
var metaData = element(by.id('heading_meta-data'));
browser.wait(protractor.ExpectedConditions.visibilityOf(metaData), 10000)
.then(function(){
metaData.click();
});
Hope this helps.