Change immediate previous icon on same level when collapsing

Change immediate previous icon on same level when collapsing - javascript

I've three collapsible elements, each one with its header and a button for collapse it. I'm using Material Design icons for the button icon.
<div class="col-md-8 order-md-1">
<form class="needs-validation" novalidate="">
<p class="h4">
<i class="material-icons md-36">turned_in_not</i> Documento
<button class="btn btn-outline-info btn-sm float-right" type="button" data-toggle="collapse" data-target="#collapseDetails" aria-expanded="true" aria-controls="collapseExample">
<i class="material-icons" >remove_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse show" id="collapseDetails" style="">
<div class="row">
<div class="col-md-4 mb-3">
<label for="DOCUMENTNUMBER">Número</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">insert_drive_file</i></span>
</div>
<span class="form-control border-info alert-info text-center">001-10-0-10459</span>
</div>
</div>
<div class="col-md-8 mb-3">
<label for="TITLE">Título</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">book</i></span>
</div>
<span class="form-control border-info">PINTURA RAMPA AGAETE</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="INSTALLATION">Instalación</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">directions_boat</i></span>
</div>
<span class="form-control border-info text-center">COMPAÑIA</span>
</div>
</div>
<div class="col-md-8 mb-3">
<label for="DEPARTMENT">Departamento</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">view_quilt</i></span>
</div>
<span class="form-control border-info">MAINTENANCE</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="CONFIRMATIONDATE">Fecha de Confirmación</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">today</i></span>
</div>
<span class="form-control border-info">-</span>
</div>
<div class="invalid-feedback">
</div>
</div>
<div class="col-md-8 mb-3">
<label for="SUPPLIER">Proveedor</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">local_shipping</i></span>
</div>
<span class="form-control border-info">JOTUN IBERICA, S.A.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="PRIORITY">Prioridad</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">error_outline</i></span>
</div>
<span class="form-control border-info text-center">N/A</span>
</div>
<div class="invalid-feedback">
</div>
</div>
<div class="col-md-8 mb-3">
<label for="BUDGET">Presupuesto</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">card_travel</i></span>
</div>
<span class="form-control border-info">120425 - Mantenimiento Rampas TCI</span>
</div>
</div>
</div>
</div>
<br>
<p class="h4">
<i class="material-icons md-36">place</i> Entrega
<button class="btn btn-outline-info btn-sm float-right collapsed" type="button" data-toggle="collapse" data-target="#collapseDelivery" aria-expanded="false" aria-controls="collapseExample">
<i class="material-icons">add_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse" id="collapseDelivery" style="">
<div class="row">
<div class="col-md-6 mb-3">
<label for="Name">Nombre</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-6 mb-3">
<label for="location">Ubicación</label>
<span class="form-control border-info"> </span>
</div>
</div>
<label for="address2">Dirección de Entrega<span class="text-muted"></span></label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="country">País</label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
</div>
<div class="col-md-5 mb-3">
<label for="contact">Contacto</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-3 mb-3">
<label for="phone">Teléfono</label>
<span class="form-control border-info"> </span>
</div>
</div>
<div class="row">
<div class="col-md-8 mb-3">
<label for="DeliveryDate">Email</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-4 mb-3">
<label for="DeliveryDate">Condiciones de Entrega</label>
<span class="form-control border-info"> </span>
</div>
</div>
</div>
<br>
<p class="h4">
<i class="material-icons md-36">credit_card</i> Facturación
<button class="btn btn-outline-info btn-sm float-right" type="button" data-toggle="collapse" data-target="#collapseInvoice" aria-expanded="false" aria-controls="collapseExample">
<i class="material-icons">add_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse" id="collapseInvoice">
<div class="row">
<div class="col-md-6 mb-3">
<label for="DeliveryDate">Nombre</label>
<span class="form-control border-info">Customer S.A.</span>
</div>
<div class="col-md-6 mb-3">
<label for="DeliveryDate">Términos de Pago</label>
<span class="form-control border-info"> </span>
</div>
</div>
<label for="address2">Dirección de Facturación<span class="text-muted"></span></label>
<div class="mb-3">
<span class="form-control border-info">POL. IND. AÑAZA, SN</span>
</div>
<div class="mb-3">
<span class="form-control border-info">EDIFICIO</span>
</div>
<div class="mb-3">
<span class="form-control border-info">CP 38111 SC DE TENERIFE</span>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="country">País</label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
</div>
<div class="col-md-5 mb-3">
<label for="contact">Contacto</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-3 mb-3">
<label for="phone">Teléfono</label>
<span class="form-control border-info"> </span>
</div>
</div>
<hr class="mb-4">
</div>
</form>
</div>
I'm stucked on changing the icon of the button for the element what it's collapsed or expanded by using jQuery.
Supposedly i should change the immediate previous icon on same level with .prev() but it's not working.
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function () {
$(this)
.prevAll()
.find("button")
.find(".material-icons")
.text("remove_circle_outline");
})
.on('hidden.bs.collapse', function () {
$(this)
.prevAll()
.find("button")
.find(".material-icons")
.text("add_circle_outline");
});
});
I also tried to use .prevAll() but then it's changing all previous icons at the same level.
What can i do to change only the button icon of the element which is being collapsed or expanded?
This is a Fiddle here showing my problem.

Use $("[data-target='#"+ $(this).attr('id') +"']") to select button with the data-target of the clicked collapse.
Here is the working code. fiddle

Related

Whole page went inside modal

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>

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

How to add different icons around the login template?

I am working on a normal login page. I would like to add different icons around the username and password text box.I have added a picture below. I am working on core UI template with Angular 4.
I could not able to get the sequence right.
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<form (submit)="loginUser($event)">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-lg-6">
<button type="submit" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-lg-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

If you just want to change the icon, then choose your icon here:
http://fontawesome.io/3.2.1/icons/
and just change the class
<span class="input-group-addon"> <i class="icon-user"> </i></span> //Here
<span class="input-group-addon"> <i class="icon-lock"> </i></span> // andHere

How can I auto scroll to bottom of the page after collapse?

I have this element that uses bootstrap collapse.
When I click on "header" of this élément, it opens and a scrollbar appears but I like to appears being at the bottom.
I try many solution from stackoverflow, but none seem to work.
I can do this ?
<div class="row">
<div class="col-sm-12">
<div id="panel-profil" class="panel panel-info">
<div id="panel-heading-profil" class="panel-heading text-center">
<a id="link-heading-profil" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo" onclick="changeArrowProfil()">
<div class="row">
<div id="triangleUn" class="col-sm-1">
<span id="triangle1" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="col-sm-10">
<span class="fa fa-truck fa-1"></span> Profil du véhicule
</div>
<div id="triangleDeux" class="col-sm-1">
<span id="triangle2" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div id="panel-body-profil" class="panel-body">
<label class="text-info" for="sel1">Longueur du véhicule :</label>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-1"><img src="../img/B10a.png" height="35" width="35" ></img></div>
<input class="col-sm-2 control-label inputConstraint"
for="formGroupInputSmall" type="text" value="6.00 m" autocomplete="off" id="value_length" readonly/>
<div class="col-sm-8 sliderConstraint"
for="formGroupInputSmall">
<input type="range" min="0" step="1" max="3" value="0"
id="value_length_slide"
onchange="changeValue('length')" />
</div>
</div>
</form>
...
...
</div>
<div class="row" id="valid-param">
<div class="col-sm-12">
<button id="btn-valid-param" onclick="modifierProfileSaisi();" type="submit" class="btn btn-success btn-sm btn-block" > Valider les paramètres</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

If your using an onClick event, then within that onClick, write this line of code,
window.scrollTo(0,document.body.scrollHeight);
This will scroll you to the bottom of the page.

Adding button next to input, horizontal form style - Bootstrap

I am trying to add a delete button next to an input.
My current code:
<form role="form" method="post" id="form">
<div class="form-group">
<div class="col-sm-9 ">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3 ">
<span>Cena</span>
<input type="text" class="form-control">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
Generated output:
The red button isn't on the right side of the last input.

Maybe one of these will work. You can create some margin inside of a input-group so the button isn't touching the input or use the grid.
See working example Snippets.
.input-group .input-group-btn.input-space {
padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<h3 class="well">Custom Input Group</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-9 ">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3 ">
<div class="form-group">
<label>Cena</label>
<div class="input-group">
<input type="text" class="form-control input-control"> <span class="input-group-btn input-space">
<button class="btn btn-danger btn-md btn-input"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<hr>
<div class="container">
<h3 class="well">Grid</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-7">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Cena</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-2">
<label>Odstrániť</label>
<div class="form-group">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>

You must use the input-group as explained on the help page.
Here the relevant code
<span>Cena</span>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>

This might break on mobile, but it looks good in a CodePen
<form role="form" method="post" id="form">
<div class="row">
<div class="col-sm-8">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3">
<span>Cena</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-1">
<br/>
<button class="btn btn-danger btn-md">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<p></p>
<div>
<button class="add_field_button btn btn-success btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</form>

Develop Reference

JavaScript is the programming language of the Web.

Change immediate previous icon on same level when collapsing - javascript

Use $("[data-target='#"+ $(this).attr('id') +"']") to select button with the data-target of the clicked collapse. Here is the working code. fiddle

Related

Whole page went inside modal

Jquery Repeater, how to make the 'create button' at the bottom?

How to add different icons around the login template?

How can I auto scroll to bottom of the page after collapse?

Adding button next to input, horizontal form style - Bootstrap

Categories

Resources