Hi I was trying to make an order form, and everything was working fine until I got towards the end of making the style sheet for the website. Then the whole thing messed up and the legends of the form are going all the way to the right end of the page and the drop down boxes are displaying all options from left to right instead of top to bottom. Could anyone look this CSS sheet over and tell me where i screwed up?
Thanks from a novice website person.
/*fieldset styles */
fieldset {
border-width: 0px;
}
fieldset.optiongroup {
margin-left: 25%;
}
fieldset.optiongroup label {
float: none;
display: inline;
width: 100px;
}
/* legend styles */
legend {
background-color: rgb(239, 198, 145);
color: black;
margin-top: 10px;
margin-bottom: 10px;
text-indent: 20px;
width: 100%;
border-radius: 10px;
}
/* label styles */
label {
clear: left;
display: block;
float: left;
font-size: 0.8em;
text-align: right;
margin: 2px 5px;
width: 25%;
}
/* select styles */
select {
display: block;
float: left;
font-size: 0.9em;
margin: 2px;
}
/* text area styles */
textarea {
display: block;
float: left;
font-size: 0.9em;
height: 75px;
width: 60%;
}
/* option styles */
option {
float: none;
display: inline;
margin: 0px;
width: 20px;
}
/* input styles */
input {
display: block;
float: left;
font-size: 0.9em;
width: 60%;
margin: 2px 0px;
}
input[type="csc"] {
width: 50px;
}
input[type="submit"] {
background-color: rgb(239, 198, 145);
float: none;
width: 150px;
height: 30px;
margin: 10px auto;
border-radius: 15px;
}
/* input focus styles */
input:focus, select:focus, textarea:focus {
background-color: rgb(255, 218, 165);
}
input:focus:valid {
background: rgb(215, 255, 215) url(go.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
input:focus:invalid {
background: rgb(255, 245, 215) url(stop.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
If need b I can post the HTML site here as well. Thanks in advance for any help!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 2
The Spice Bowl
Author: Daniel Erb
Date: 21SEP13
Filename: spice.htm
Supporting files: diners.png, discover.png, formsubmit.js,
go.png, master.png, modernizr-1.5.js, payment.css,
regex.txt, sb.css, sbback.png, sblogo.png,
state.txt, stop.png, visa.png
-->
<meta charset="UTF-8" />
<title>Spice Bowl Financial Information</title>
<script src="modernizr-1.5.js"></script>
<script src="formsubmit.js"></script>
<link href="sb.css" rel="stylesheet" type="text/css" />
<link href="payment.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="sblogo.png" alt="The Spice Bowl" />
</header>
<nav>
<ul>
<li class="newgroup">Home</li>
<li>Keyword Search</li>
<li class="newgroup">Spices</li>
<li>Seasonings</li>
<li>Blends</li>
<li>Salts & Peppers</li>
<li>Popcorn Seasonings</li>
<li>Dip Mixes</li>
<li>Bulk Spices</li>
<li>Extracts</li>
<li>Flavorings</li>
<li class="newgroup">Spice Jars</li>
<li>Spice Jar Labels</li>
<li>Spice Sets</li>
<li>Mortar & Pestles</li>
<li class="newgroup">Cookbooks</li>
<li>Online Recipes</li>
<li>Forums</li>
<li class="newgroup">My Account</li>
<li>Checkout</li>
<li>Order History</li>
<li>Shipping Info</li>
<li class="newgroup">Tech Support</li>
<li>Hours</li>
<li>Contact Us</li>
</ul>
</nav>
<section>
<h1>Payment Form</h1>
<form id="Payment Form" name="Payment Form"
action="http://www.thespicebowlcorp.com/cgi-bin/payment"
method="post">
<fieldset id="Billing">
<legend>Billing Information (required)</legend>
<label for="fName">First Name</label>
<input name="fName" id="fName" required="required" />
<label for="lName">Last Name</label>
<input name="lName" id="lName" required="required" />
<label for="street">Street Address</label>
<input name="street" id="street" required="required" />
<label for="street2">Street Address (2)</label>
<input name="street2" id="street2" />
<label for="city">City</label>
<input name="city" id="city" required="required" />
<label for="State">State</label>
<select name="State" id="State" required="required">
<option value="state1">AL</option>
<option value="state2">AK</option>
<option value="state3">AZ</option>
<option value="state4">AR</option>
<option value="state5">CA</option>
<option value="state6">CO</option>
<option value="state7">CT</option>
<option value="state8">DE</option>
<option value="state9">FL</option>
<option value="state10">GA</option>
<option value="state11">HI</option>
<option value="state12">ID</option>
<option value="state13">IL</option>
<option value="state14">IN</option>
<option value="state15">IA</option>
<option value="state16">KS</option>
<option value="state17">KY</option>
<option value="state18">LA</option>
<option value="state19">ME</option>
<option value="state20">MD</option>
<option value="state21">MA</option>
<option value="state22">MI</option>
<option value="state23">MN</option>
<option value="state24">MS</option>
<option value="state25">MO</option>
<option value="state26">MT</option>
<option value="state27">NE</option>
<option value="state28">NV</option>
<option value="state29">NH</option>
<option value="state30">NJ</option>
<option value="state31">NM</option>
<option value="state32">NY</option>
<option value="state33">NC</option>
<option value="state34">ND</option>
<option value="state35">OH</option>
<option value="state36">OK</option>
<option value="state37">OR</option>
<option value="state38">PA</option>
<option value="state39">RI</option>
<option value="state40">SC</option>
<option value="state41">SD</option>
<option value="state42">TN</option>
<option value="state43">TX</option>
<option value="state44">UT</option>
<option value="state45">VT</option>
<option value="state46">VA</option>
<option value="state47">WA</option>
<option value="state48">WV</option>
<option value="state49">WI</option>
<option value="state50">WY</option>
</select>
<label for="zip">Zip/Postal Code</label>
<input name="zip" id="zip"
placeholder="nnnnn (-nnnn)"
required="required"
pattern="^\d{5}(\-\d{4})?$" />
<label for="country">Country</label>
<input name="country" id="country" required="required" value="United States" />
<label for="phone">Phone</label>
<input name="phone" id="phone" type="tel"
placeholder="(nnn) nnn-nnnn"
required="required"
pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" />
</fieldset>
<fieldset id="Credit Card">
<legend>Credit Card (required)</legend>
<fieldset id="optionGroup">
<label for="Diners"><img src="diners.png" alt="Diner" /></label>
<input type="radio" name="ccard" id="Diner"
value="Diner" />
<label for="Discover"><img src="discover.png" alt="Discover" /></label>
<input type="radio" name="ccard" id="Discover"
value="Discover" />
<label for="Master"><img src="master.png" alt="Master" /></label>
<input type="radio" name="ccard" id="Master"
value="Master" />
<label for="Visa"><img src="visa.png" alt="Visa" /></label>
<input type="radio" name="ccard" id="Visa"
value="Visa" />
</fieldset>
<label for="Credit Card Number">Credit Card Number</label>
<input name="Credit Card Number" id="Credit Card Number"
required="required"
pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" />
<label for="Expiration">Expiration Date</label>
<select name="ccardmonth" id="ccardmonth" required="required">
<option value="month0">--Month--</option>
<option value="month1">January (01)</option>
<option value="month2">February (02)</option>
<option value="month3">March (03)</option>
<option value="month4">April (04)</option>
<option value="month5">May (05)</option>
<option value="month6">June (06)</option>
<option value="month7">July (07)</option>
<option value="month8">August (08)</option>
<option value="month9">September (09)</option>
<option value="month10">October (10)</option>
<option value="month11">November (11)</option>
<option value="month12">December (12)</option>
</select>
<select name="ccardyear" id="ccardyear" required="required">
<option value="year0">--Year--</option>
<option value="year1">2014</option>
<option value="year2">2015</option>
<option value="year3">2016</option>
<option value="year4">2017</option>
<option value="year5">2018</option>
</select>
<label for="CSC">CSC</label>
<input name="CSC" id="CSC"
placeholder="nnn"
required="required"
pattern="^\d{3}$" />
</fieldset>
<fieldset id="Additional Information">
<legend>Additional Information</legend>
<label for="email">Contact Email</label>
<input name="email" id="email" type="email" />
<label for="notes">Special Notes</label>
<textarea name="notes" id="notes"></textarea>
</fieldset>
<p>
<input type="submit" value="Submit Order" />
</p>
</form>
<footer>
<address>The Spice Bowl · 871 Park St. ·
East Point, GA 30344
· (404) 555- 8711
</address>
</footer>
</section>
<aside>
<h1>The Spice Bowl Recommends</h1>
<h2>Salt-Roasted Pecans</h2>
<ul>
<li>2 cups pecans</li>
<li>3 Tbs. butter, melted</li>
<li>1 1/4 tsp. fine sea salt</li>
</ul>
<p>Preheat oven to 325°. Toss pecans and butter together;
add salt and toss again. Spread in a single layer on a baking
sheet. Bake about 15 minutes. Cook on baking sheet.
</p>
<h2>Dried Beef Sticks</h2>
<ul>
<li>5 lbs. ground chuck</li>
<li>5 Tbs. quick salt</li>
<li>3 tsp. mustard seed</li>
<li>2 tsp. granulated garlic</li>
<li>2 tsp. cracked pepper</li>
<li>1 Tbs. hickory smoked salt</li>
<li>1 Tbs. liquid smoke</li>
</ul>
<p>Mix beef and season. Place in a large covered container
for three days; make sure beef is thoroughly mixed each day.
On third day, shape beef into sticks, and bake at 150° for
8 hours (turn half-way through).
</p>
</aside>
</body>
</html>
Can you please share the markup(html)? You are using % as units for width on some elements like legend. I am not seeing a parent container element with a fixed width set, so the legend is going to being 100% of your page.
Related
I have a question regarding aligning the input fields in form using flexbox.
This is my code:
enter image description here
.form {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.form input,
select {
margin-left: 2rem;
}
<div className="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
I want to align input fields. Thank you in advance for help!
All you need to change is the span tag from span to div.
This will lead to the title taking up the entire screen and the input field being pushed to the new line, aligning all four of them. To make the input fields also inline, just wrap each input field along with the title inside a div as shown below(apologies for the bad formatting).
<div className="form">
<label>
<div>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</div>
</label>
<label>
<div>
<span>Please write your name: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please write your surname: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please pick today's date: </span>
<input type="date" />
</div>
</label>
</div>
Grid could help here.
example from your code.
.form {
display: grid;
grid-template-columns:repeat(2,auto);
gap:0.5em;
justify-content:start;
}
label {
display:contents;
}
.form input,
select {
margin:auto;
margin-left: 2rem;
}
<div class="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
label{display:contents} can be avoided if you do not wrap the input or select inside the label , but link it via the attribute for. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/labelto get the purpose and usage ;)
I added a few more styles to your sample code if this is what you're looking for.
.form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.form label {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 10px;
}
.form label span {
flex: 0 1 28%;
}
.form label input, .form label select {
flex: 0 1 70%;
}
<div class="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
You don't really need flexbox here. Just define the label elements as display: block (to fill the entire line) and the spans inside them as inline-blocks with a min-width setting that you adjust to the length of the longest span text:
label {
display: block;
}
label>span {
display: inline-block;
min-width: 200px;
}
<div className="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
After a day of trying, I figured out the solution.
label {
display: flex;
align-items: center;
text-align: start;
}
span {
display: inline-block;
width: 200px;
}
input,
select {
align-items: center;
}
Maybe not the best solution, but it got the job done.
Thanks everyone for help.
I have to align the fields(right) as shown in below image.Here is my code built in Angularjs using label tag for all the legends in form and i styled using CSS. How to correct the alignment, so that i can submit this to higher officials?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title> SAP WORKBENCH </title>
<style>
body{
background-color: lightgray;
margin-left: 500px
}
.option{
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button{
width: 300px;
}
</style>
</head>
<h2>Password Reset</h2>
<body>
<div ng-app="">
<b></b>
<form>
<label>System:</label>
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<div ng-switch="myVar">
<label>Client:</label>
<select class="option" ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select class="option" ng-switch-when="QR9">
<option>500</option>
</select>
<select class="option" ng-switch-when="PR3">
<option>500</option>
</select>
<select class="option" ng-switch-default>
<option></option>
</select>
</div>
<br>
<label>User:</label>
<input class="option" type="text" placeholder="Enter User Id.."></input>
<br><br>
<label>New Password:</label>
<input class="option" type="password"></input>
<br><br>
<label>Re-Enter New Password:</label>
<input class="option" type="password"></input>
<br><br>
<input class="button" type="button" value="Reset">
</form>
</div>
</body>
</html>
Wrap each label + select into a separate div. Then give the parent container the properties display: flex, flex-direction: column, align-items: center.
Further tip: Try to avoid the <br > tags and work with margin-bottom. For this purpose also the new single <div> elements can be used.
It would be best if you use bootstrap to do this. It's much easier to get alignment done that way so please do use bootstrap. Also I have done a test code without bootstrap using display: flex;. Hope this helps your problem (I have not included any of your ngswitch statements here)
HTML
<h2>Password Reset</h2>
<body>
<div>
<b></b>
<form class="d-flex flex-row">
<div class="d-flex flex-column text-right mr-1">
<label class="margin-b">System:</label>
<label class="margin-b-7">Client:</label>
<label class="margin-b-7">User:</label>
<label class="margin-b-7">New Password:</label>
<label class="margin-b">Re-Enter New Password:</label>
</div>
<div class="d-flex flex-column">
<div class="margin-b">
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
</div>
<div class="margin-b">
<select class="option">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
<div class="margin-b">
<input class="option" type="text" placeholder="Enter User Id.."></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="button" type="button" value="Reset">
</div>
</div>
</div>
</form>
</div>
</body>
CSS
body {
background-color: lightgray;
}
.option {
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
width: 300px;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.text-right {
text-align: right;
}
.mr-1 {
margin-right: 1rem;
}
.margin-b {
margin-bottom: 5px;
}
.margin-b-7 {
margin-bottom: 7px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/mhp6uksd/
I have a wordpress site and I am customising it with the Divi theme. I have added an HTML form to a 'Code' module and it works great. However I cannot work out where I should put the CSS. I have tried to 'Custom CSS' areas of both the row and module itself. Perhaps there is something wrong in the code? I have pasted it below. Thanks!
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
<font face="helvetica"
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target='_parent'>
<input type=hidden name="oid" value="00D0Y0000034cvq">
<input type=hidden name="retURL" value="https://globalstudyuk.com/success-qatar">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="kasper.martlev#weare4c.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
<label for="last_name">Last Name</label> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>
Date of Birth: <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYYY" /></span><br><br>
<label for="mobile">Mobile</label> <input id="mobile" maxlength="40" name="mobile" size="20" type="number" pattern="\d*" required=true/><br><br>
<label for="email">Email</label> <input id="email" pattern="[^ #]*#[^ #]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>
Current/Previous School/University: <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text" required=true /><br><br>
Course you would like to study: <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" required=true /><br><br>
<label for="lead_source">Where did you hear about us?</label> <select id="lead_source" name="lead_source"><option value="">--None--</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Google">Google</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Deferred">Deferred</option>
<option value="Flier / Poster">Flier or Poster</option>
<option value="GSUK Alumni">GSUK Alumni</option>
<option value="GSUK_Website">GSUK_Website</option>
<option value="Other_(Please specify)">Other</option>
<option value="Referral_(Please specify)">Referral</option>
<option value="School Counsellor_(Please specify)">School Counsellor</option>
<option value="School Presentation">School Presentation</option>
<option value="School Tour">School Tour</option>
<option value="University Website_(Please specify)">University Website</option>
<option value="Web">Web</option>
</select><br><br>
<input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
<input type=hidden id="country_code" name="country_code"value="QA" />
<input type=hidden id="city" name="city" value="Doha" />
<center><input type="submit" name="submit"></center>
</form>
login to your dashboard -> click on Appearance -> click Customize -> click on Additional CSS and paste your css in that.
We resolved the issue by removing
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
Although this would work fine on most pages, it was causing white boxes to appear in strange places, presumably due to the CMS we were using building pages in columns.
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'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