I am working on a date range control and i want to append icon at the end of the input box but it shows up in new line.
I want all controls like location, start date, end date etc.. in one row for screen larger than 768px and calendar icon appended at the end of start & end input control like it is in the shown on codepen.
Example: http://codepen.io/anon/pen/pggjax
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-2">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-4 ">
<label>Start </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-4 ">
<label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-2">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class=" col-md-2 col-xs-12">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-2 col-xs-12">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-3 col-xs-12 ">
<div class="input-group">
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
</div>
<div class=" col-md-3 col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="end Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
<!-- <label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>-->
</div>
<div class="col-md-2 col-xs-12">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<p></p>
<p>
Example
<div class="form-group ">
<label class="col-xs-3 control-label ">Date</label>
<div class="col-xs-5 date ">
<div class="input-group input-append date " id="dateRangePicker ">
<input type="text " class="form-control " name="date " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
</div>
</p>
First i would remove input type class input-sm then instead of span class input-group-addon add-on i would add input-group-btn then for the select values use form-group with class form-control instead
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<div class="form-group">
<label for="location1">Location One</label>
<select class="form-control" id="location1">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label for="location2">Location Two</label>
<select class="form-control" id="location2">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-3">
<label>Start </label>
<div class="input-group">
<input type="text" class="form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<label>End </label>
<div class="input-group">
<input type="text" class=" form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-2 btn-group-vertical">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
Related
I am trying to align the input controls and facing issue with the alignment.
Here is the code snippet I tried to create the UI design.I need to create UI with rectangle borders/containers around each set of input controls and let me know if we can achieve similar with Booststrap. .
In the above picture the 'calendar icon' is not moving next to 'Date' textbox and pushing other controls which is causing alignment issue.
I have mock up design as well.
<div class="container-fluid bg-3 text-center">
<form>
<div class="form-row">
<div class=" form-group date col-md-2 ">
<label for="DateFrom">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="form-group date col-md-2">
<label for="Dateto">Date To</label>
<input type="text" class="form-control" id="Dateto">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class=" form-group col-md-2 ">
<label for="DD1">Dropdown1</label>
<select class="form-control" id="DD1">
<option selected value=All>All</option>
<option value=Val1>Val1</option>
<option value=Val2>Val2</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DD2">Dropdwon2</label>
<select class="form-control" id="DD2">
<option value=All>All</option>
<option value=val1>val1</option>
<option value=val2>val2</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DD3">Dropdown3</label>
<select class="form-control" id="disposition">
<option value=All>All</option>
</select>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<label for="Date">Date</label>
<label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
<label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
</div>
<div class="form-group col-md-2">
<label for="dd4">Dropdown4</label>
<select class="form-control" id="dd4">
<option selected value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DDl5">Dropdowmn5</label>
<select class="form-control" id="DDl5">
<option value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2">
<label for="Dsply">Display</label>
<label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
<label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<button type="button" class="btn btn-success" >btn1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" >btn2</button>
</div>
<div class=" form-group col-md-2 ">
<button type="button" class="btn btn-success" >btn3</button>
</div>
<div class=" form-group col-md-2">
<button type="button" class="btn btn-primary" >btn4</button>
</div>
</div>
</form>
</div>
Please find mock up design and expected output
Could you please let me know how to fix alignment and move 'calendar icon' next/inside-right to date textbox and get the borders around input controls.
I'm gonna try to answer first about the 'calendar icon'.
You need to make css that gonna show icon in background and push text I would do it like this:
#icon {
height: 40px;
margin-top: 10px;
border: 1px solid #e6e6e6;
padding-left: 40px;
padding-right: 50px;
background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
background-repeat: no-repeat;
background-position: left 10px center;
}
<input type="text" id="icon" value="input">
If you need to use only Bootstrap then I would suggest to use <span> with bootstrap class input-group-addon and put <i> tag with icon inside it.
For example:
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
</form>
So the output should be something like this:
And for this you need to find the right size of column in Bootstrap so basically your col-md-2 if you change the number to 4,3,5,8 (col-md-4) it's gonna make different size of column in row so you can play with it.
Other changes:
- for new line you can use HTML tag <br />
- and to align radio buttons use class text-left
<div class="container-fluid bg-3 text-center">
<form>
<div class="form-row">
<div class=" form-group date col-md-3 ">
<label for="DateFrom">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="form-group date col-md-3">
<label for="Dateto">Date To</label>
<input type="text" class="form-control" id="Dateto">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class=" form-group col-md-2 ">
<label for="DD1">Dropdown1</label>
<select class="form-control" id="DD1">
<option selected value=All>All</option>
<option value=Val1>Val1</option>
<option value=Val2>Val2</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DD2">Dropdwon2</label>
<select class="form-control" id="DD2">
<option value=All>All</option>
<option value=val1>val1</option>
<option value=val2>val2</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DD3">Dropdown3</label>
<select class="form-control" id="disposition">
<option value=All>All</option>
</select>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-4 text-left">
<label for="Date">Date</label>
<br />
<label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
<label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
</div>
<div class="form-group col-md-3">
<label for="dd4">Dropdown4</label>
<select class="form-control" id="dd4">
<option selected value=All>All</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DDl5">Dropdowmn5</label>
<select class="form-control" id="DDl5">
<option value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2 text-left">
<label for="Dsply">Display</label>
<br />
<label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
<label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<button type="button" class="btn btn-success" >btn1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" >btn2</button>
</div>
<div class=" form-group col-md-2 ">
<button type="button" class="btn btn-success" >btn3</button>
</div>
<div class=" form-group col-md-2">
<button type="button" class="btn btn-primary" >btn4</button>
</div>
</div>
</form>
</div>
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.
Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.
Issue:
1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the glyphicon glyohicon-date within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?
Thanks.
<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>
<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>
<button type="submit" class="btn btn-default">Reserve</button>
</form>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>
Have managed to solve it from the given link: With optional icons
<div class="form-group has-feedback">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group form-inline">
<label for="datetime" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
</div>
This is a coursera assignment of Bootstrap
using the "With optional icons" method in Bootstrap you can achieve this:
for example, my answer to this question:
<div class="form-group has-feedback">
<label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="date-choose" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
</div>
</div>
you can refer to the link below to find what you want:
http://getbootstrap.com/css/#forms-control-validation
The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.
i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>
Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example
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.