I need to align fields with their labels, all in 1 straight horizontal line. I'd normally fix this in the HTML, but I can't edit it, so I need it to be fixed with CSS.
This is the jsfiddle demo: http://jsfiddle.net/83hxF/
My HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display: none;"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
My CSS:
#field_21770004 {
width: 150px;
}
#field_21927140 {
position: absolute;
top: 10px;
left: 250px;
}
#field_21769174 {
position: absolute;
top: 10px;
left: 350px;
}
There are several ways that you can do that, have them aligned vertically or horizontally.
1st method:
HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
CSS:
#field_21770004 {
width: 150px;
display:inline;
}
Demo: http://jsfiddle.net/83hxF/4/
2nd method:
HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error" style="display:none";></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display:none";></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error" style="display:none";></div>
CSS:
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
Demo: http://jsfiddle.net/83hxF/5/
3rd method: (Changing CSS only)
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
#field_21770004_errors{
display:none;
}
#field_21769174_errors{
display:none;
}
Demo: http://jsfiddle.net/83hxF/15/
It's not really clear to me what you mean. Align the labels where?
This is a solution that will align them in a tabular way, the label next to the input/select fields, each in their own line.)
label {
display: inline-block;
width: 6em;
}
.validation {
margin-bottom: 2em;
}
(This assumes that the display: none; on the validation error field can be removed or altered. What is it there for in the first place? Can't this be done in the CSS file as well?)
Please try to explain a little better so I can be of better help.
Try floating the inputs/selects left and clearing right, and floating the labels left and clearing left.
input, select {
float: left;
clear: right;
}
label {
float: left;
clear: left;
}
Here's an updated fiddle: http://jsfiddle.net/ZHVpc/
Related
I am strangling with CSS overlay...
My sample has two sets of input tags with label on top of it
Clicking on the first number nicely switches to the edit mode.
Unfortunately, clicking on the second number doesn't really work as expected.
div[class="number_container"]>input:focus+label {
display: none
}
.number_container {
position: relative;
}
.number_content {
position: absolute;
top: 1px;
left: 1px;
height: 22px;
width: 148px;
text-align: center;
background: white;
}
<body>
<div class="number_container">
<input id="1" name="1" style="width: 150px;" type="number" value="100000">
<label class="number_content" for="1">$1,000,014</label>
</div>
<br/>
<br/>
<div class="number_container">
<input id="2" name="2" style="width: 150px;" type="number" value="200000">
<label class="number_content" for="1">$2,000,014</label>
</div>
</body>
it seems that CSS selector somehow selects the first div element
Nevertheless it works with tab key
any help highly appreciated
Issue is about you have mentioned for="1" that refers first input automatically when you focus on second input. So change it to "2" will solve the issue. check below snippet for reference.
div[class="number_container"]>input:focus+.number_content {
display: none
}
.number_container {
position: relative;
}
.number_content {
position: absolute;
top: 1px;
left: 1px;
height: 22px;
width: 148px;
text-align: center;
background: white;
}
<body>
<div class="number_container">
<input id="1" name="1" style="width: 150px;" type="number" value="100000">
<label class="number_content" for="1">$1,000,014</label>
</div>
<br/>
<br/>
<div class="number_container">
<input id="2" name="2" style="width: 150px;" type="number" value="200000">
<label class="number_content" for="2">$2,000,014</label>
</div>
</body>
try changing the "for" of your second label to "2" so it matches with the second input
I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>
I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}
You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>
input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>
I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
Am designing the 'Login' page, here, the page look okay before I press the submit button, but, just after I pressed the submit button, it looks not okay. The second div moved little bit downward. Any help to solve this issue? pls refer the below image
html
<div class="LogIn">
<form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
<label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<label>Password</label><input type="password" name="password" placeholder="Password"/>
<label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
<span class="password">Password does not be match</span>
<label>Email</label><input type="email" name="email" placeholder="Email"/>
<span class="email">Email is not valid</span>
<label>Website</label><input type="url" name="url" placeholder="Website"/>
<span class="urlcontent">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
</div>
<div class="BusinessConnect">
<p>Business Unit</p>
<div id="BuCheck" class="BusinessCont">
<p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>
</div>
</div>
css
.BusinessConnect {
float: left;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
float: left;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
After the 'submit' button pressed,
One of the way you can follow is by seperating the divs like this,
<section>
<div id="LogIn">
You can put your thing here
</div>
<div id="BusinessConnect">
<p>Business Unit</p>
Your second part
</div>
</section>
/// Your CSS
section {
width: 100%;
height: 200px;
margin: auto;
padding: 10px;
}
div#BusinessConnect {
border:1px solid #000000;
margin-left:50%;
height: 200px;
}
div#LogIn {
width: 45%;
float: left;
border:1px solid #000000;
height:200px;
}
Its just a sample, you can further work on it.
And I myself prefer using % instead of pixels, because they are helpful for responsive layouts.
Many different ways to accomplish what you'd like, but if floating isn't a necessity you could try the following:
.BusinessConnect {
display: table-cell;
vertical-align: top;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
display: table-cell;
vertical-align: top;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
I know this is basic, I've lost hours on this, read posts, books, etc and it doesn't matter: I just don't understand how CSS works...
I want to have field 2) below field 1) in the following form:
<label>1) Select date</label>
<p>
<select name="data" id="data" form="configs">
<option value="custom">Custom</option>
<option value="thismonth">This Month</option>
<option value="lastmonth">Last Month</option>
<option value="ytd">Year to Date</option>
</select>
</p>
<div id="frombox">
<label for="from">From</label>
<br \>
<input type="text" class="box" name="from">
</div>
<div id="tobox">
<label for="to">To</label>
<br \>
<input type="text" class="box" name="to">
</div>
<label>2) Select fields to import</label>
<p>
<input type="text " name="datepicker " id="datepicker " required/>
</p>
With the CSS:
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
}
.box {
width: 100px;
}
You may see a live example here
try this
http://jsfiddle.net/isqware/y3mf4q2j/
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
clear:both;
}
.box {
width: 100px;
}
label {
clear: both;
display: block;
}