I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.
Related
I want to align two inputs in the same line.
I used the solutions available here:
http://jsfiddle.net/XAkXg/
http://www.java2s.com/Code/HTMLCSS/Form/inputclassidselectorandpropertyselector.htm
Aligning html inputs on same line
html form - make inputs appear on the same line
Everything would work, but in my case, the input[type=text] has been defined earlier
The CSS code looks pretty much as this:
input {
margin-left: 50px;
}
input[type=text] {
width: 75%;
min-width: 450px;
padding: 12px 20px;
box-sizing: border-box;
outline: none;
border: 1px solid #f7fbff;
background-color: #f7fbff;
}
input[type=text]:focus {
background-color: #c6e2f2;
}
input[type=number]:focus {
background-color: #c6e2f2;
}
and now I have implemented the location feature into my HTML code:
<figure class="fig" id="location">
<label>
<div class="order">1</div>
<p>Location<span class="asterisk">*</span></p>
</label>
<button class="locbtn" id="btn-geolocation">Find my location</button>
<br>
<label for="lat" class="location">Latitude</label>
<input type="text" name="latitude" class="location">
<label for="lon" class="location">Longitude</label>
<input type="text" name="longitude" class="location">
<div style="clear:both;"></div>
</figure>
and accordingly CSS:
.location {
width: 50x;
float: left;
vertical-align: top;
margin: auto;
}
.location input[type=text]{
width: 25px;
display: inline-block;
}
and the effect is, as you can see below:
the input texts don't work, since they have been defined earlier in the code (for entire form).
How can I make the input[type=text] definition also for this section considered?
Moreover, instead of display: inline-block; I tried: display: inline; and float: left; It didn't work either.
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I'm trying to get certain elements of this form to be displayed on the same line: I want the output of the form to be displayed on the same line as "Total: $ " - (I still want the price per lb ($1.00 in this example) to be displayed on the line above and the number spinner to be displayed to the right). I tried to wrap the whole thing in a <span> that I set the CSS of to be display:inline but it didn't work (& I've tried a few other things as well which also didn't work).
Here's a selection of my code:
HTML:
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>
CSS:
legend { float: left;
margin-top: 35px;
padding-top: 20px;
margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
margin-top: 25px;
padding-bottom: 5px;
margin-bottom: 10px;
}
legend { float: left;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
}
form > * { border:1px solid red; line-height:2em }
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant">
<label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity">
</span>
<span>Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
Get rid of your p tags. Try not to use dispensable containers and classes. Your code would be more readable. You can change the line-height value of form > *
I have a 'row' div that contains, essentially, a label, then a text input, then a hyperlink. My problem here is I wish the width of the input to always fill the available width between the label and the hyperlink. I have tried numerous approaches, but with only varied forms of failure. I suspect maybe I can use some sort of margin voodoo to make the a tag not absolute, and always have the input neatly bounded by the lable and the a, but I am now at a complete loss as to what to try next.
Here is my HTML:
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
And here is the CSS:
.manualNotification #recipientsTab .email-row {
margin-top: 5px;
margin-bottom: 5px;
}
.manualNotification #recipientsTab .email-row label {
display: inline-block;
width: 50px;
text-align: center;
}
.manualNotification #recipientsTab .email-row a {
position: absolute;
width: 50px;
right: 10px;
margin-left: 10px;
}
Flexbox can do that
.email-row {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
}
.email-row label {
flex: 0 0 50px;
text-align: center;
}
.email-row input {
flex: 1;
}
.email-row a {
flex: 0 0 50px;
margin-left: 10px;
}
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
JSfiddle Demo
please add flowing css end of your css:
div.email-row{max-width: 30%; float:left;margin-right:20px}
see the following links for more details:
http://www.cssdesk.com/gDzpd
I want to create an error box for a form like the one below.
I already themed the input box and am using jQuery validation to display errors. However I can't get that error box right. I think I'll need to put that together with three tags, but I don't know what tags to use (jQuery validation uses a label tag to display the error).
My current code for the error is:
<label for="email">
<span>Email:</span>
<input type="text" id="email" name="email" class="error">
<label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>
I must make this IE7 compatible.
I made the following changes:
<div class="dataline">
<div class="label">Label:</div>
<div class="field"><input type="text" id="name" name="name" /></div>
<div class="arrow"></div>
<label class="error">Error text</label>
<div class="ender"></div>
</div>
I set the arrowhead as an image for the class arrow so now it looks perfect. Basicly I used 4 left floated block elements (label, input, arrowhead and bubble body). Now I only have two problems: the arrowhead is displayed even when there's no error. How can I hide it when the label is not after it? My other problem is that the container div is 800px wide and if the error text is long, it wraps around to the next line. How can I avoid it?
My css is:
div.dataline {
margin: 10px 0 0 0;
white-space: nowrap;
width: 3000px;
owerflow: visible;
height: 60px;
}
div.field {
float: left;
}
div.label {
float: left;
width: 120px;
margin: 20px 0 0 0;
}
div.arrow {
background-image: url('gfx/redarrow.png');
margin: 7px 0 0 10px;
background-repeat: no-repeat;
width: 20px;
height: 45px;
float: left;
}
div.ender {
background-image: url('gfx/bubbleend.png');
margin: 7px 0 0 0px;
background-repeat: no-repeat;
width: 3px;
height: 45px;
float: left;
}
label.error {
height: 27px;
background-image: url('gfx/bubblemiddle.png');
float: left;
padding: 9px;
margin: 7px 0 0 0;
}
the following fiddle is a good start for your implementation:
http://jsbin.com/aReQUgay/1/edit
#email.error
{
border-color: red;
}
#email.error + label
{
background-color: red;
}