Bootstrap Data toggle collapse is not working. Issue is that when click on second link then first link is not toggle collapse
**Fiddle**
Demo
Try it. Now if you click on second link then first link is collapse.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="accordion">
<div class="card card-plain">
<div class="card-header" role="tab" id="heading1">
<a data-toggle="collapse" aria-expanded="true" aria-controls="collapse1" data-target="#collapse1">
Company Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Company Name</label>
<input class="form-control" id="comp_entity" name="comp_entity" type="text" placeholder="Company Name" value="">
</div>
<div class="col-sm-6">
<label>Business Unit / Division</label>
<input class="form-control" id="bus_unit_div" name="bus_unit_div" type="text" placeholder="Business Unit / Division" value="">
</div>
</div>
</div>
</div>
</div>
<div class="card card-plain">
<div class="card-header" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse2" data-target="#collapse2">
Employee Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Job title / role</label>
<input class="form-control" id="job_title" name="job_title" type="text" placeholder="Job Title / Role" value="">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Hours of Work</label>
<input class="form-control" id="hours_of_work" name="hours_of_work" type="text" placeholder="Hours of Work" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
<div class="col-sm-6">
<label>Performance Rating</label>
<input class="form-control" id="perform_rating" name="perform_rating" type="text" placeholder="Performance Rating" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Personnel (Staff) Number</label>
<input class="form-control" id="personal_staff_num" name="personal_staff_num" type="text" placeholder="Personnel (Staff) number" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
otherwise
please remove class show in the first tab content div
from
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">
to
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1">
and it will work.
use 'in' instead of 'show' in below code
<div id="collapse1" class="collapse in" role="tabpanel" aria-labelledby="heading1">
Related
Bootstrap accordion is not working correctly.If i click on one accordion tab it is closing the other one and some times it is closing and opening again.For the first time it is working fine but for the next time its not working correctly.If i click on one tab it is closing the other one or else it will be opened by default after closing
<div class="col-lg-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Notify Users
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Notify Users
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
you wrongly assigned data-parent="#accordion", you have to assign this for Collapse div and use single parent <div id="accordion"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-lg-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<div class="panel panel-default col-md-6">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Notify Users
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
<div class="panel panel-default col-md-6">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Notify Users
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I am working on a modal that adds the product. The modal has seperated tabs which is needed to add details. The question is that how can I handle validation.
Each tab has own form and submit button is the same. Also the "required" rule is not working. Any help please ?
Edit: Html code added. Don't read description after here. Because text is mostly code so I need to add more description. Also is there a way to handle this issue.
<div class="modal fade" id="product_add_modal" tabindex="-1" role="dialog" aria-labelledby="tab_modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header p-b-15">
<h4 class="modal-title">Product Setup</h4>
<ul class="card-actions icons right-top">
<a href="javascript:void(0)" data-dismiss="modal" class="text-white" aria-label="Close">
<i class="zmdi zmdi-close"></i>
</a>
</ul>
</div>
<div class="modal-body p-0">
<div class="tabpanel">
<ul class="nav nav-tabs p-0">
<li class="active" role="presentation">General Info</li>
<li role="presentation">Product Images</li>
<li role="presentation">Price</li>
<li role="presentation">Inventory</li>
<li role="presentation">Shipping</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fadeIn active" id="product_add_general">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form class="form-horizontal" action="/somewhere" method="POST">
#csrf
<div class="form-group label-floating is-empty">
<label class="control-label">Title</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<textarea id="add_product_desc" required></textarea>
</div>
<div class="chips chips-placeholder"></div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_images">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form action="#" class="dropzone" id="product_add_images_form" enctype="multipart/form-data"></form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_price">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Compare at price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="togglebutton m-b-15 ">
<label>
<input type="checkbox" class="toggle-info" checked> Charge taxes on this product
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_inventory">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">SKU (Stock Keeping Unit)</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">Barcode (ISBN, UPC, GTIN, etc.)</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="" class="control-label">Inventory policy</label>
<select class="select form-control">
<option selected>Don't track inventory</option>
<option>Track this product's inventory</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_shipping">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Width</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Height</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Depth</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<label class="control-label">Weight</label>
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn suffix-select">
<select class="select form-control">
<option>lb</option>
<option>kg</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Extra Shipping Fee</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Add Product</button>
</div>
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
</div>
I'm trying to implement the same CSS for an input of type text as similar to the one we have in CreateUser default page. So when you click on User Name textbox it shows a blue line under it. Same I tried on my page it works fine, but when I go to other page and come to this page again, it does not show the blue line under the textbox.
create-user.component
<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
<div #modalContent class="modal-content">
<form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
<div class="modal-header">
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<span>{{l("CreateNewUser")}}</span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active">User Details</li>
<li role="presentation">User Roles</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">
<div class="row clearfix" style="margin-top:10px;">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
<label for="username" class="form-label">{{l("UserName")}}</label>
</div>
</div>
</div>
</div>
mypage.html
<div class="row clearfix" [#routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card main-content">
<div class="row" style="background-color:white;">
<div class="header">
<h2>
{{l('MyPage: ADD/EDIT')}}
</h2>
</div>
<br />
<form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
<div class="col-md-12">
<div class="form-group form-float">
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
</div>
</div>
I think you need to label with form="myName" inside the div which has class="form-line".
Instead of;
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
Try this;
<div class="form-line">
<label for="myName" class="form-label">{{l("myName")}}</label>
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
I'm trying to add a search glyph to a button at the end of this centered search bar.
Below is the style I want:
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">Search</span>
</div>
</div>
</form>
<br><br>
</div>
</div>
</div>
But I want to to have a button a - something like:
<span class="glyphicon glyphicon-search"></span></button>
instead of the
<span class="input-group-addon">Search</span>
but when I do this the button moves onto the next line and throws off my styling.
Using Bootstraps form-inline class and form structure will resolve your issue.
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center col-md-6 col-md-offset-3">
<h1>Jumbotron with form</h1>
<form class="form-inline" role="form">
<div class="form-group form-group-lg">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn btn-default btn-lg pull-left">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<br><br>
</div>
</div>
</div>
Try this:
DEMO
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span> Search</button></span>
</div>
</div>
</form>
<br>
<br>
</div>
</div>
</div>