I have tried everything to align these boxes, so they start from the same place downwards.
I'm not sure which div to put in my stylesheet
<div class="boxes">
<p class="h3"> You are able to add up to 3 addresses.
Please select the type of address, using the following guide
<ul>
<li>H: Permanent home address</li>
<li>P: Postal address (where you will be from June to September)</li>
<li>L: Local address (where you currently live)</li>
</ul>
</p>
<div id="address">
<div id="input1" style="margin-bottom:4px;" class="input">
Street<span class="required">*</span>
<input name="Street[]" type="text" >
</div>
<div id="input2" style="margin-bottom:4px;" class="input">
Line2
<input name="Line2[]" type="text" >
</div>
<div id="input3" style="margin-bottom:4px;" class="input">
Line3
<input name="Line3[]" type="text" >
</div>
Any ideas?
Having amended your HTML, to wrap the label/associated text in actual label elements, added a for attribute to those elements and a corresponding id attribute to the input elements:
<div class="boxes">
<p class="h3">
You are able to add up to 3 addresses. Please select the type of address, using the following guide
<ul>
<li>H: Permanent home address</li>
<li>P: Postal address (where you will be from June to September)</li>
<li>L: Local address (where you currently live)</li>
</ul>
</p>
<div id="address">
<div id="input1" style="margin-bottom:4px;" class="input">
<label for="street">Street<span class="required">*</span></label><input name="Street[]" id="street" type="text">
</div>
<div id="input2" style="margin-bottom:4px;" class="input">
<label for="line2">Line2</label><input id="line2" name="Line2[]" type="text">
</div>
<div id="input3" style="margin-bottom:4px;" class="input">
<label for="line3">Line3</label><input id="line3" name="Line3[]" type="text">
</div>
</div>
</div>
The following CSS works:
#address label {
display: inline-block;
width: 5em;
text-align: right;
padding-right: 0.5em;
}
#address input {
display: inline-block;
}
JS Fiddle demo.
In the above, once the text was wrapped in a tag (to become the label element), it could then be assigned display: inline-block; and could then be given a width. Also, white-space was removed from between the close of the label and the opening of the input, in order to prevent white-space in the HTML file causing any space between the two elements.
Related
I am using Squarespace and trying to move the margin of the first .field.text.three-digits using "nth-of-type", but I can't get it to work right.
CSS:
.form-item.fields.phone:nth-of-type(3) {
background-color: red;
margin-left: 20%;
}
HTML:
<fieldset id="phone-yui_3_17_2_1_1531771537607_16560" class="form-item fields
phone">
<div class="title">Phone</div>
<legend>Phone</legend>
<div class="field text three-digits" id="yui_3_17_2_1_1531936132691_509">
<label class="caption" id="yui_3_17_2_1_1531936132691_508"><input
class="field-element" x-autocompletetype="phone-area-code" type="text"
maxlength="3" data-title="Areacode" id="yui_3_17_2_1_1531936132691_507">
(###)</label>
</div>
<div class="field text three-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-prefix" type="text" maxlength="3" data-
title="Prefix">###</label>
</div>
<div class="field text four-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-suffix" type="text" maxlength="4" data-
title="Line">####</label>
</div>
</fieldset>
Thanks!
This code:
.form-item.fields.phone:nth-of-type(3)
Will apply the styles to the third element it finds with these three classes
form-item fields phone
If you want to modify the first instance of an element with the classes field text three-digits, your CSS should be something like this:
.field.text.three-digits:nth-of-type(2) {
background-color: red;
margin-left: 20%;
}
I am making a copy of a pen-and-paper character sheet for a RPG, as a way of learning html/css. However I got stuck right at the beginning when trying to style a form, holding some background information about the character.
Currently I've managed to make my form of labels and input-fields to look like the picture to the left. However the pen-and-paper character sheet (and the desired look) is formatted like the one on the right.
Below is the code I'm using.
.sheet-character-background form input,
label {
margin-bottom: 10px;
}
.age-input {
width: 60px;
}
<div class="sheet-character">
<div class="sheet-character-background">
<form>
<label>Name</label>
<input type="text" name="attr_name">
<br>
<label>Race</label>
<input type="text" name="attr_race">
<br>
<label>Gender</label>
<input class="gender-input" type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
<br>
<label>Religion</label>
<input type="text" name="attr_religion">
<br>
<label>Occupation</label>
<input type="text" name="attr_occupation">
<br>
<label>Archetype</label>
<input type="text" name="attr_archetype">
<br>
<label>Environment</label>
<input type="text" name="attr_environment">
<br>
<label>Background</label>
<input type="text" name="attr_backgrund">
</form>
</div>
</div>
What are the steps for going from what I have to what I want? I played around with surrounding each "row" with a <div> and class and setting their width in css. However this didn't work out so I reverted to my initial version and got stuck.
Many people would probably suggest to get a css framework, but what you want can be done with some simple css.
First, your html basically consists of a form with a series of rows, except for one row where it consists of two fields in one row. So I modified your html slightly that each row is wrapped by a div with a class as .form-row and delete the <br> (let css to do the rendering instead of using html tag):
To achieve what you want will then come down to set a width for the form, and how each row will behave, and set the width of input, and last override the setting for the special case of .age-input.
This is just a 'quick-and-dirty' way to achieve what you want, hopefully it provide you some ideas and suggestions in your learning.
form {
width: 300px;
}
.form-row {
display:flex;
}
input {
width: 100%;
}
.age-input {
width: 60px;
}
<form>
<div class="form-row">
<label>Name</label>
<input type="text" name="attr_name">
</div>
<div class="form-row">
<label>Race</label>
<input type="text" name="attr_race">
</div>
<div class="form-row">
<label>Gender</label>
<input type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
</div>
<div class="form-row">
<label>Religion</label>
<input type="text" name="attr_religion">
</div>
<div class="form-row">
<label>Occupation</label>
<input type="text" name="attr_occupation">
</div>
<div class="form-row">
<label>Archetype</label>
<input type="text" name="attr_archetype">
</div>
<div class="form-row">
<label>Environment</label>
<input type="text" name="attr_environment">
</div>
<div class="form-row">
<label>Background</label>
<input type="text" name="attr_backgrund">
</div>
</form>
I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.
CSS to apply style to specific elements of specific div:
html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
height: 42px;
}
HTML Code:
<div class="asd removeFocus">
<div class="forms_in_ap removeFocus">
<label for="email">Email address</label>
<div class="removeFocus">
<input type="text" id="email" name="email" class="required error ">
<span id="email-error" class="error">Please enter a Valid Email Address.</span>
</div>
</div>
<div class="forms_in_ap removeFocus">
<label for="reEmail">Re-enter email address</label>
<div class="removeFocus">
<input type="text" id="reEmail" name="reEmail" maxlength="64">
</div>
</div>
</div>
<div class="form">
<div class="forms_in_ap">
<label for="nogInFirstName">First Name</label>
<div>
<input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInLastName">Last Named</label>
<div>
<input type="text" name="txtLName" maxlength="15" id="nogInLastName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInAccNumber">Coupon Number</label>
<div>
<input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
</div>
</div>
<div class=" forms_in_ap">
<div class="ccvDiv">
<label for="cvv"> pin</label>
<div>
<input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
</div>
</div>
</div>
</div>
The above CSS works fine but not sure whether this is a correct, standard or optimize code please suggest me.
Since you have each specific input with an HTML ID, there is no need for you to specify the parent class.
This should work for you, it's cleaner and simpler:
input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
height: 42px;
}
The most important thing to remember here is that IDs are unique. You can't have two elements with the same ID, so adding the parent element when styling is not necessary.
Note about the "input": Since the IDs are unique, there's no need to have the "input" before the ID, but it can be seen as good practice for elements such as inputs to have the selector prior to the class/id, making it clearer what you're styling.
However, this doesn't apply to things like divs, since almost everything on the web is a div, adding it before a class/id is just overkill.
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>