I'm try to align the date field right next to the select field. How to get this done ? (e.g. two form fields on one row)
<div class="control-group">
<label class="control-label span4">Released by</label>
<div class="controls">
<select class="span4">
<option value="0" selected="selected">John Doe</option>
<option value="1">Another name</option>
<option value="2">And another one</option>
</select>
<div class="input-append date controls" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
</div>
Here's my approach: http://jsfiddle.net/Cakj6/
<div class="control-group">
<label class="control-label span4">Released by</label>
<div class="controls">
<select class="span4">
<option value="0" selected="selected">John Doe</option>
<option value="1">Another name</option>
<option value="2">And another one</option>
</select>
<div class="input-append date controls" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
</div>
.control-group {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.control-label, .controls, .controls select, .controls .date {
float: left;
line-height: 20px;
vertical-align: middle
}
.controls select {
margin: 0;
padding: 0;
}
.controls, .controls date {
padding-left: 5px;
}
Let us know if it answers your question.
Add this css
.slct{
float:left
}
.input-append{
float:left
}
Modified html
<div class="control-group">
<label class="control-label span4">Released by</label>
<div class="controls">
<select class="span4 slct">
<option value="0" selected="selected">John Doe</option>
<option value="1">Another name</option>
<option value="2">And another one</option>
</select>
<div class="input-append date controls" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
HI now used to this css as like thids
.control-group{
background:red;
width:400px;
}
.control-label.span4{
float:left;
}
.input-append.date.controls{
float:right;
}
Demo
Related
I have a Bootstrap form to which I've applied form-inline and have several elements there. I've read that, until 768px, the elements are kept inline. But I found this to not be the case, if I assign input-lg to some elements, the last elements breaks at a new line even above 768px.
An alternative would be to make these elements SMALLER until 768px. Is there a way to do this?
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-horizontal">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Use this to keep them on the same line above 768px.
If you want to keep the horizontal under 768px just change "col-sm-6" class to "col-xs-6" like this:
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Try to limit the width of the field with the max-width property.
Add the float: left; property to them so that they remain on one line.
Use the overflow: hidden; property to make the form a container of floating elements.
Please check te result: http://www.bootply.com/JXslxuh3qX
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-2-groups-on-one-line,
.form-4-groups-on-one-line {
clear: left;
overflow: hidden;
}
.form-2-groups-on-one-line .form-group {
float: left;
max-width: 50%;
}
.form-4-groups-on-one-line .form-group {
float: left;
max-width: 25%;
}
.form-2-groups-on-one-line input,
.form-2-groups-on-one-line select,
.form-4-groups-on-one-line input,
.form-4-groups-on-one-line select {
max-width: 100%;
}
<form class="form-inline form-2-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-inline form-4-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address">
</div>
<div class="form-group mg-up">
<button type="submit" class="form-control input-lg">Check The Price</button>
</div>
</form>
Please see my updated example: http://www.bootply.com/paPWbTuwAL
I added bootstrap column classes to each of your form items so you have better control over their sizing, and added a little custom CSS
Hope this helps!
CSS
.custom-form .form-control{
width:100%;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="margin-bottom-30">Get Instant Essay Writing / Editing Help</h1>
</div> <!-- end col-xs-12 -->
</div> <!-- end row -->
<div class="row">
<form class="form-inline custom-form">
<div class="form-group col-xs-2">
<input type="text" class="form-control input-sm " placeholder="Your Title">
</div>
<div class="form-group col-xs-4">
<select class="form-control input-sm">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address">
</div>
<div class="form-group col-xs-2 mg-up">
<button type="submit" class="form-control input-sm col-xs-3">Check The Price</button>
</div>
</form></div>
<div class="row">
<h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3>
</div>
</div>
How do I vertically align a button to the text box controls?
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 1</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 2</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 3</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<button class="btn btn-primary btn-lg btn-block">Search</button>
</div>
</div>
https://jsfiddle.net/2nn422ax/
See a css solution in jsfiddle below:
https://jsfiddle.net/2nn422ax/1/
CSS:
.row{
position: relative;
}
.button-container{
position: absolute;
bottom: 0;
right: 0;
}
.form-group{
margin-bottom: 0px;
}
It appears that the button is aligned to the text email above the form field, as it should be. If you use margin:top for the button about maybe 30px, it should align with the text fields if you are talking about the search button. Hope that helps.
Just use modern and agile flexbox:
.row {
display: flex;
align-items: center;
}
Jsfiddle
I am having some issues styling my modal. The length of the tabs bottom-border goes past the side of the modal. I would also like to have the tabs have borders on every side so it will look more like it is in a enclosure. I made a plunker but I cannot get the modal the correct height and the tabs are not showing up?
plunkr
<!--Cover Content-->
<tabset>
<tab heading="Contract">
<div class="col-xs-12" style="margin-top:30px">
<div class="inline-fields">
<label style="margin-left:13px">Original Contract:</label>
<input style="width:115px;text-align:right" ng-model="items.JobOriginalContract" type="text" format="number">
<label style="margin-left:57px">Geo Area:</label>
<select ng-controller="JobMiscCtrl" style="width:148px" ng-model="items.GeoAreaName" ng-options="job.id as job.GeoAreaName for job in geoAreaArray">
<option value="0"></option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:69px">Total CO:</label>
<input style="width:115px;text-align:right" ng-model="items.JobTotalCO" type="text" format="number">
<label style="margin-left:82px">Class:</label>
<select ng-controller="JobMiscCtrl" style="width:148px" ng-model="items.JobClassName" ng-options="job.id as job.JobClassName for job in jobClassArray">
<option value="0"></option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:12px">Revised Contract:</label>
<input disabled style="width:115px;text-align:right" ng-model="items.JobRevisedContract" type="text" format="number">
<label style="margin-left:55px">Min Wage:</label>
<input style="width:90px" ng-model="items.JobMinWage" type="text" format="number">
<label style="margin-left:0px">Type:</label>
<select ng-controller ="JobMiscCtrl" style="width:148px" ng-model="items.JobTypeName" ng-options="job.id as job.JobTypeName for job in jobTypeArray">
<option value="0"></option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:60px">Retainage:</label>
<select style="width:115px;text-align:right" ng-model="items.JobRetainage">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
</select>
<label style="margin-left:42px">Tax Exempt:</label>
<input type="checkbox" ng-model="items.JobTaxExempt" />
</div>
<div class="inline-fields">
<label style="margin-left:22px">Original Budget:</label>
<input style="width:115px;text-align:right" ng-model="items.JobOriginalBudget" type="text" format="number">
<label style="margin-left:39px">Ins Program:</label>
<select style="width: 145px" ng-model="items.JobInsProgram">
<option value="CCIP">CCIP</option>
<option value="OCIP">OCIP</option>
<option value="RCIP">RCIP</option>
<option value="TSIB">TSIB</option>
</select>
</div>
</div><!--End col-xs-12-->
</tab><!--End Contract Tab-->
<!--<tab disabled heading="Contacts"></tab>
<tab disabled heading="Document Distribution"></tab>-->
</tabset><!--End Tab Content-->
.large-Modal .modal-dialog{
width:800px; height: 500px;
position: absolute;
top:0; bottom: 0; left: 0; right: 0;
margin: auto
}
.tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
I see CSS templates like Bootstrap. How do style my form into a div table like below?
With the following HTML:
<form>
<fieldset>
<legend>Legend</legend>
<div>
<div>
<label for="first-name">First Name</label>
<input id="first-name" type="text">
</div>
<div>
<label for="last-name">Last Name</label>
<input id="last-name" type="text">
</div>
<div>
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div>
<label for="city">City</label>
<input id="city" type="text">
</div>
<div>
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
you can use the code the for you desired result
<form>
<fieldset>
<legend>Legend</legend>
<div class="container">
<div>
<label for="first-name">First Name</label>
<input id="first-name" type="text">
</div>
<div>
<label for="last-name">Last Name</label>
<input id="last-name" type="text">
</div>
<div>
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div>
<label for="city">City</label>
<input id="city" type="text">
</div>
<div>
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
<div class="clear">
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
and use the style
.container {
width:550px;
float:left;
display:block;
}
.container div{ float:left;
position:relative;
display:block;
width:180px;
margin:5px 0px;
}
.container div label{ width:100%;
display:block;
float:left;
color:#666666;
line-height:20px;
}
.clear{ clear:both;}
.pure-button{ color:#FFFFFF;
background:#0066FF;
border:none;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
margin:5px 0px;
padding:5px;
cursor:pointer;
}
.pure-button:hover{ background:#0033FF; }
input[type="text"],input[type="email"],select{
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border:1px solid #999;
padding:3px;
}
You may use bootstrap's Grid system http://getbootstrap.com/css/#grid-options
see Demo: http://jsbin.com/weyedivi/1/edit
With the code as written below, The DIV containing SELECT 4 is pushed 2 columns to the right, but if I remove all of the SELECTS from the HTML the alignments are stacked one under the other correctly with no skipped columns. - Is there some default CSS applied to a SELECT or something I'm just missing here? Why is this occurring?
<div style="height:300px; text-align:right; padding-right:8px; margin-top:5px;">
<div style="float:left; width:33%;">1: <select name="brands" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">2: <input type="text" name="model" style="width:65%;" /></div>
<div style="float:left; width:33%;">3: <select name="type" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div style="float:left; width:33%;">4: <select name="caliber" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">6: <input type="text" name="accuracy" style="width:65%;" /></div>
<div style="float:left; width:33%;">7: <input type="text" name="finish" style="width:65%;" /></div>
<div style="float:left; width:33%;">8: <input type="text" name="action" style="width:65%;" /></div>
<div style="float:left; width:33%;">9: <input type="text" name="stock" style="width:65%;" /></div>
<div style="float:left; width:33%;">10: <input type="text" name="capacity" style="width:65%;" /></div>
<div style="float:left; width:33%;">11: <input type="text" name="chokes" style="width:65%;" /></div>
<div style="float:left; width:33%;">12: <input type="text" name="chamber" style="width:65%;" /></div>
</div>
When Selects and corresponding DIV's are removed i get this... correctly.
Since it isn't optimal to use inline CSS (via the style attribute), I rewrote everything to keep the HTML separate from the CSS. It's also worth noting that you should wrap the text for the elements in a label element. As you can see, you match the label's for attribute with an id.
As for the question - you simply needed to set a height on the wrapping div elements. The input elements had a height of 24px, and the select elements had a height of 26px. It is typical of floating elements to to break to a new line when the elements have differing heights. A height of 26px would suffice. (working example)
CSS:
form {
height:300px;
text-align:right;
padding-right:8px;
margin-top:5px;
}
form > div {
width:33%;
float:left;
height:26px;
}
form > div > select, form > div > input {
width:65%;
}
Updated HTML
<form>
<div>
<label for="brands">1:</label>
<select id="brands" name="brands">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="model">2:</label>
<input type="text" id="model" name="model" />
</div>
<div>
<label for="type">3:</label>
<select id="type" name="type">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="caliber">4:</label>
<select id="caliber" name="caliber">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="accuracy">5:</label>
<input type="text" id="accuracy" name="accuracy" />
</div>
<div>
<label for="finish">6:</label>
<input type="text" id="finish" name="finish" />
</div>
<div>
<label for="action">7:</label>
<input type="text" id="action" name="action" />
</div>
<div>
<label for="stock">8:</label>
<input type="text" id="stock" name="stock" />
</div>
<div>
<label for="capacity">9:</label>
<input type="text" id="capacity" name="capacity" />
</div>
<div>
<label for="chokes">10:</label>
<input type="text" id="chokes" name="chokes" />
</div>
<div>
<label for="chamber">11:</label>
<input type="text" id="chamber" name="chamber" />
</div>
</form>
Alternatively, you could avoid floating elements and use inline-block level elements; achieving the same effect without having to set a height on the elements.
Example demonstrating this