I have two datepickers with different Id's and only one is working with
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="start_datepicker" required>
</div>
</div>
Not working
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="peak_start_date_from" required>
</div>
</div>
$(document).ready(function() {
$('#peak_start_date_from').datepicker();
});
Related
I want to add a container in to my form. The container height is about 4 bootstrap rows. Once I put the container into the second column of the first row, there is a white space that appears under the first column of the first row. Is it possible to remove that white space?
This is how I have implemented my form. (divide into two col-6 columns is not a solution, it won't work when it comes to the mobile view). jsfiddle exmple
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input class="form-control" placeholder="Name" name="Name" required>
</div>
<div class="col-md-2"></div>
<div class="col-sm-4">
<div style="width: 100% ; height: 250px; background-color: black;">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
I want to remove the marked spaces, like the below image:
Add the following style block for sizes md and above...
#media screen and (min-width:768px){
.toggleDiv{ position:absolute; right:0; }
}
working snippet below:
#media screen and (min-width:768px) {
.toggleDiv {
position: absolute;
right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input class="form-control" placeholder="Name" name="Name" required>
</div>
<div class="col-md-2"></div>
<div class="col-sm-4 toggleDiv">
<div style="width: 100% ; height: 250px; background-color: black;">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
I have two fieldsets in first div and then im using panel but my panel is covering from above div, Please see the below screen shots
1.) With Filedsets and details
2.) After adding panel, Panel-heading to page it covers the whole content
<div class="container">
<div class="enquiry">
<fieldset class="col-md-12">
<legend><h3>Nag</h3></legend>
<div class="row form-group">
<div class="col-md-4">
<h4>DOB: <span>22-April-2001, Male</span> </h4>
<h4>Enquired: <span>07 </span> </h4>
<h4>Academic Year: <span>2017-2018</span></h4>
</div>
<div class="col-md-4">
<h4>Nagarjuna (Father)</h4>
<h4><i class="fa fa-phone"></i> 9635821471</h4>
<h4><i class="fa fa-envelope"></i> <span class="enq-parent-email">nag.akki#gmail.com</span> </h4>
</div>
<div class="col-md-4">
<h4>
<i class="fa fa-home fa-2x"></i>
</h4>
</div>
</div>
</fieldset>
<fieldset class="col-md-12 margin-bottom">
<legend><h3>Overview</h3></legend>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>Current Name: </label>
<input type="text" class="form-control" readonly="" value="Name">
</div>
<div class="col-md-4">
<label>Current Loasdaf Name: </label>
<input type="text" class="form-control" readonly="" value="asdfaiwewrw">
</div>
<div class="col-md-4">
<label>fasdaskdlfa;skdljfa;skldf</label><br>
<input type="radio" name="transport" readonly="" checked=""> Yes
<input type="radio" name="transport" readonly=""> no
</div>
</div>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>Current Address: </label>
<input type="text" class="form-control" readonly="" value="#07, Kondar, Melborne-38">
</div>
<div class="col-md-4">
<label>asdfasdfasdf</label>
<input type="text" class="form-control" readonly="" value="asdfasd">
</div>
<div class="col-md-4">
<label>asdfasdfasdfasd</label><br>
<input type="radio" name="visit" readonly="" checked=""> Yes
<input type="radio" name="visit" readonly=""> no
</div>
</div>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>asdfasdfasdfa</label>
<input type="text" class="form-control" readonly="" value="asdfasdf">
</div>
<div class="col-md-4">
<label>asdfasdfasdfasd</label>
<input type="text" class="form-control" readonly="" value="asdfasdf">
</div>
<div class="col-md-4">
<label>asdfasdfasdfas</label><br>
<input type="radio" name="visit" readonly="" checked=""> Yes
<input type="radio" name="visit" readonly=""> no
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Enquiry Status </label>
<select class="form-control">
<option value="">Select Status</option>
<option value="Inprogress">Inprogress</option>
<option value="ConvertedtoApplication">Converted to Application</option>
<option value="Cloased, Not Interested"></option>
</select>
</div>
<div class="col-md-8">
<label>Questions ?</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</fieldset>
</div>
<br>
</div>
This is very strange for me because i never seen such kind of issues.
Waiting for some response, Thanks in Advance!!
You can use row class in bootstrap.try this
<div class="container">
<div class="row">
<div class="enquiry">
<fieldset class="col-md-12">
.................................
</fieldset>
<fieldset class="col-md-12 margin-bottom">
........................................
</fieldset>
</div>
</div>
<div class="row">
<h1>
Add Here your content
</h1>
</div>
</div>
<form class="form-inline">
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>From:</label>
<input type="text" class="input-sm form-inline" name="start" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>To:</label>
<input type="text" class="input-sm form-inline" name="end" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</form>
when I change class="form-control" for input, it will be ok, but it also change size of whole form :(
Solve:
<form class="form-inline">
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>From:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="start"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>To:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="end"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</form>
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.