I was able to align the second checkbox but not the first one. I have used the .Checkbox CSS is shown below and it is working for the second box. Do not know why it is not working for the first checbkbox.
label {
background-color: white;
width: 130px;
clear: left;
text-align: left;/*change this R to L*/
padding-right: 10px;
padding-left: 4px;
}
input,
label {
float: left;
}
.Checkbox{
clear:none;
text-align: right;
white-space: nowrap;
}
<div class="sc-formfield-input">
<label class="Checkbox"><input type="checkbox" name="Attendance" data-field-type="Text" value="Will Attend In Person" required="required" data-validation-message="Please fill out this field."> Will Attend In Person</label></div>
<br>
<div class="sc-formfield-input">
<label class="Checkbox">
<input type="checkbox" name="Attendance" data-field-type="Text" value="Will Attend Virtually" required="required" data-validation-message="Please fill out this field."> Will Attend Virtually
</label>
</div>
JSFiddle
float was causing some issues. Check the below snippet with updated HTML/CSS
label {
background-color: white;
width: 130px;
clear: left;
text-align: left; /*change this R to L*/
padding-right: 10px;
padding-left: 4px;
}
.Checkbox {
clear: none;
text-align: right;
white-space: nowrap;
}
<div class="sc-formfield-input">
<input
type="checkbox"
name="Attendance"
data-field-type="Text"
value="Will Attend In Person"
required="required"
data-validation-message="Please fill out this field."
/>
<label class="Checkbox"> Will Attend In Person</label>
</div>
<div class="sc-formfield-input">
<input
type="checkbox"
name="Attendance"
data-field-type="Text"
value="Will Attend Virtually"
required="required"
data-validation-message="Please fill out this field."
/>
<label class="Checkbox"> Will Attend Virtually</label>
</div>
Please change clear style.
clear: both;
Does this help you?
Related
I am trying to create a <form> as part of a project, which has text inputs with a label before them. I am trying to put the <label> and the <input> on the same line, aligned to the right side like this example project:
Here is the code I have attempted to use:
.labelrow {
text-align: right;
vertical-align: top;
}
.inputrow {
display: inline-block;
text-align: left;
vertical-align: top;
}
<form id="survey-form">
<div class="labelrow">
<label id="name" for="name">* Name:</label></div>
<div class="inputrow">
<input type="text" id="name" class="input-field" required placeholder="Enter your name"></div>
<div class="labelrow">
<label id="email" for="email">* Email:</label>
</div>
<div class="inputrow">
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
This code gives me the result of this:
The <label> are aligned correctly, but the <input> are on the other line. What can I fix to get both on the same line and aligned to the right like the example?
Solution
House both label and input into a single div
Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
Duplicate ids are a no-no as well (also fixed)
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.input-field {
margin-left: 1em;
padding: .5em;
margin-bottom: .5em;
}
<form id="survey-form">
<div class="row">
<label for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="row">
<label for="email">* Email:</label>
<input type="email" id="email" class="input-field" required placeholder="Enter your email">
</div>
</form>
By enclosing both elements into the same "div" you can align them together in a row.
<form id="survey-form">
<div class="inputrow">
<label id="name" for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="inputrow">
<label id="email" for="email">* Email:</label>
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
By default, "div" tags always place a line break before and after they're inserted.
Potentially the simplest option is to put the input inside the label. Make the label a block item with text align right.
label {
display:block;
text-align:right;
margin: 5px;
}
<form id="survey-form">
<label id="name" for="name">* Name: <input type="text" id="name" class="input-field" required placeholder="Enter your name"></label>
<label id="email" for="email">* Email: <input type="email" id="name" class="input-field" required placeholder="Enter your email"></label>
</form>
Remove the <div>s and add a <br> after each <input>. Add the following to both <label> and <input>:
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
height and line-height can be adjusted but keep them equal to each other. Set <form> width to 100vw and of course text-align: right on <label>s. Place the <label>s and <input>s into a <fieldset> and assign the following to the <fieldset>
width: 50vw;
margin-left: 40vw;
border: 0px none transparent
BTW the <label>s have a duplicate #id which is invalid, therefore removed.
Demo
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.2 Raleway;
background: #FBFBFB;
}
form {
width: 70vw;
}
fieldset {
width: 50vw;
text-align: right;
margin-left: 20vw;
border: 0px none transparent;
background: none;
}
legend {
width: 70vw;
text-align:center;
margin: 0 auto;
}
label,
input,
button {
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
padding-left: 5px;
margin-top: 15px;
font: inherit;
}
input {
width: 60%;
max-width: 300px;
border-radius: 4px;
}
label {
width: 30%;
text-align: right;
}
button {
height: 1.5rem;
padding: 0 5px;
margin: 0 0 0 auto;
float: right;
cursor:pointer;
}
sup {
display:inline-block;
width: 25%;
margin-left: 70%;
margin-top: 10px;
text-align: right;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<form id="survey-form">
<fieldset>
<legend>Let us know how we can improve freeCodeCamp</legend>
<label for="name">* Name:</label>
<input id="name" type="text" placeholder="Enter your name" required><br>
<label for="email">* Email:</label>
<input id="email" type="email" placeholder="Enter your email" required><br>
<label for="age">* Age:</label>
<input id="age" type="number" placeholder="Enter your age" min='18' max='120' required><br>
<sup>* Required</sup>
<button type='submit'>Submit</button>
</fieldset>
</form>
When you wrap each in their own div you get the stacking that you are seeing. Put both the label and the input into a single div.
I am trying to create a modal and everything has come along perfectly except my radio buttons. No matter what I try I don't understand how to move them to the left like the other elements in my form. All I want to do is move the radio buttons to the left and align them with the other elements like normal radio buttons.
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content {
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
input[type="radio"] {
display: inline;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name"> E-Mail:
<input type="text" placeholder="E-mail"> What do you think about us?<br>
<textarea rows="6" cols="33" name="comment "></textarea>
<br> How would you rate us ?
<br>
<label>
<input type ="radio " name="rating " id="rating " value="Excellent ">Excellent
<input type ="radio " name="rating " id="rating " value="Very Good ">Very Good
<input type ="radio " name="rating " id="rating " value="Average ">Average
<input type ="radio " name="rating " id="rating " value="Poor ">Poor
<input type ="radio " name="rating " id="rating " value="Extreamly Poor ">Extreamly Poor
</label>
<br>
<br>
SUBMIT
</form>
</div>
</div>
Here's the fiddle: https://jsfiddle.net/dcag0167/2/
Theres a lot of work an little bugs in your code. I will focus on the radio buttons. 2 main errors.
1- You are setting the radio buttons width to 50% with:
input {
width: 50%;
display: block;
margin: 10px 0px;
}
Solution comes to reset it in its own style
input[type="radio"]{
width: auto;
display: inline;
}
2- You are making all your text and radio buttons to just one label tag. This is not a good pratice. We can set on label for each radio button and text. An by adding its display to block, they will align.
label {
display: block;
}
Hope this helps :>
.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content{
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"]{
width: auto;
display: inline;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name">
E-Mail:
<input type="text" placeholder="E-mail">
What do you think about us?<br>
<textarea rows="6" cols="33" "name="comment"></textarea>
<br>
How would you rate us?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
<br>
SUBMIT
</form>
</div>
</div>
First, remove the entire input css styles and just keep one style.
Next, I changed your HTML to include a <label> for each radio button. That way, you can also click the <label> to have the radio button clicked. The for="" is the trick there.
Finally, Surround each group of ratings in a <div class="ratings"> so they can all belong to their own group with a shared style.
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content {
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
.ratings {
margin: 10px 0px;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;" />
<form action="">
Name:
<input type="text" placeholder="Name"> E-Mail:
<input type="text" placeholder="E-mail"> What do you think about us?<br>
<textarea rows="6" cols="33" name="comment"></textarea>
<br> How would you rate us ?
<br>
<div class="ratings">
<input type="radio" name="rating" id="ExcellentRating" value="Excellent">
<label for="ExcellentRating">Excellent</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="VeryGoodRating" value="Very Good">
<label for="VerGoodRating">Very Good</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="AverageRating" value="Average">
<label for="AverageRating">Average</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="PoorRating" value="Poor">
<label for="PoorRating">Poor</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="ExtremelyPoorRating" value="Extremely Poor">
<label for="ExtremelyPoorRating">Extremely Poor</label>
</div>
<br>
<br>
SUBMIT
</form>
</div>
</div>
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%;
}
How can I get my boxes to align with my text?
I have also copy and pasted the html/css code in jsFiddle!
http://jsfiddle.net/EFByC/51/
<form
action="http://www.sblogger/cgi-bin/subcomments"
method="post" >
<fieldset name="commentFS" id="commentFS">
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required"/>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" title="You must provide your password" required="required"/>
<label for="commentbox">Comment<br />
(500 character limit)</label>
<textarea maxlength="500" name="commentbox" id="commentbox"></textarea>
<input type="submit" value="Submit Comment"/>
</fieldset>
</form>
here you go, edited your Fiddle
It comes down to this:
If you float left & right, you need a wrapper to preserve the room for the floats.
so i added this:
p {
overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}
label{
display: block;
float: left;
font-size: 0.9em;
width: 20%;/* was 100%*/
margin-top: 5px;
margin-bottom: 5px;
/*clear: left*/
}
and the wrapper:
<p>
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required">
</p>
i see you use float, display and width:100%; , you definitly have too much unnedeed rules here .
inline-block + width, can do it and allow you to vertiacal-align labels and inputs,
float+clear can work too, but vertical-align will not be avalaible :
example with inline-block:
/*Field set styles */
fieldset {
background-color: rgb(245,245,255);
margin: 15px auto;
padding: 5px;
width: 90%;
}
/* Label Styles */
label{
display: inline-block;
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 5px;
width:35%;
}
/*Input control styles */
input, textarea {
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
width: 55%;
vertical-align:middle;
}
/*Text area styles */
textarea {
height: 150px;
}
http://jsfiddle.net/EFByC/58/