Hello in Firefox the form is offset. Have absolutly no idea why, because it works fine with chrome and internet-explorer. I'm using Firefox version 56.0 (32-Bit).
The form is designed with flexbox.
enter image description here
<form class="form wow fadeIn">
<div class="flex">
<div class="flexcontainer_new">
<label for="name" >Dein Name: </label><br>
<input class="input" type="text" name="name" id="name" ><br>
</div>
<div class="flexcontainer_new margin_left_60" >
<label for="email" >Deine Email: </label><br>
<input class="input" type="text" name="email" id="email" ><br>
</div>
</div>
<div class="flexcontainer_new_2.0">
<label class="margin-bottom_20" for="description" >Erzähl mir von deinem Projekt: </label><br>
<textarea></textarea>
</div>
<input href="" type="submit" value="Senden">
</form>
.flexcontainer_new{
display:flex;
margin: 100px auto 0;
width:750px;
height: 100px;
flex-direction: column;
}
.flexcontainer_new_2.0{
display:flex;
margin: 0 auto;
width:100px;
flex-direction: column;
}
Related
I need to do this only using flex but I am having some difficulty aligning my labels and input fields properly.This is what the end result is supposed to look like.
Any help would be appreciated!
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel">
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position">
<input type="radio" name="availability" id="Part-Time" value="Part-Time">
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time">
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<input type="checkbox" name="AM" id="AM" value="AM">
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM">
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience">
</div>
<div class="details">
</div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">Worked 5 years at Bayshore Veterinarian Services</textarea>
</div>
<div class="details">
<input type="submit" value="Apply Now">
</div>
</form>
I have tried all sorts of things but i cannot get them to line up. I have tried having two columns where column 1 contains the labels, while the other column contains the input field but i did not succeed.
I wrote some CSS to create the desired layout. It works without changing the provided HTML.
You can add the missing name input from the image though.
The .details > input:first-child selects the Apply Now button and set a margin-left: calc(25% + 6px), so it has a left space matching the labels and is align with other inputs.
You might as well consider using an actual <button> tag for submit though. If you do so later, you can change this selector to .details > button:first-child.
Hope this will help!
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form {
width: 600px;
display: flex;
flex-direction: column;
gap: 9px;
padding: 30px;
}
.details {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
}
.details > label:first-child {
width: 25%;
display: flex;
justify-content: flex-end;
}
.details > input#date {
margin-right: 30px;
}
.details > input:first-child {
margin-left: calc(25% + 6px);
padding: 3px 6px;
}
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel" />
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position" />
<input type="radio" name="availability" id="Part-Time" value="Part-Time" />
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time" />
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date" />
<input type="checkbox" name="AM" id="AM" value="AM" />
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM" />
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience" />
</div>
<div class="details"></div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">
Worked 5 years at Bayshore Veterinarian Services</textarea
>
</div>
<div class="details">
<input type="submit" value="Apply Now" />
</div>
</form>
I am attempting to align the two cells for the address input. The one that is inline I can shift, but the ones that are not I do know know how to shift right. If I could get some creative feed back I would appreciate it.
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
<section class="EMBody">
<div>
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div>
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
</div>
<div>
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
</div>
<div>
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
</div>
<div>
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</div>
</section>
use nth-child :
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
input:nth-child(3),input:nth-child(4)
{
margin-left:104px;
}
<section class="EMBody">
<div>
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div>
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
</div>
<div>
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
</div>
<div>
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
</div>
<div>
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</div>
</section>
The easiest fully responsive solution would be to use CSS-Grid. THis would allow you to cut the code down a lot.
simply use a 2 column layout and let the label for the address span 3 rows.
.EMBody {
display: grid;
grid-template-columns: min-content auto;
column-gap: 10px;
}
.EMBody {
white-space: nowrap;
}
.EMBody label:nth-of-type(2) {
grid-row: span 3;
}
<section class="EMBody">
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</section>
EDIT: I have updated both the CSS and the html. I have figured out the centering, but am still having trouble with the alignment of labels and fields.
I need for the input fields and labels to be lined up to where there is a perfect line running down the center of them, essentially dividing them because the labels are stacked on top of one another and input fields are stacked on top of one another.
The code below already resembled how I want it to look, other than that the form is on the left edge and my labels and input fields aren't perfectly lined up.
This is my form so far:
<div style="text-align:center">
<form>
<div>
Name: <input type="text" name="Name" size="40"/>
<br/>
<br/>
</div>
<div>
Address: <input type="text" name="Address" size="50"/>
<br/>
<br/>
</div>
<div>
City: <input type="text" name="City" size="25"/>
<br/>
<br/>
</div>
<div>
State: <input type="text" name="State" size="25"/>
<br/>
<br/>
</div>
<div>
Zip: <input type="text" name="Zip" size="25"/>
<br/>
<br/>
</div>
<div>
Email: <input type="text" name="Email" size="40"/>
<br/>
<br/>
</div>
<div>
Subscribe to our mailing list?
<br/>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div>
Comments:<br/>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
<br/>
<br/>
<input type="submit" />
<input type="reset" />
</div>
</form>
</div>
So far, the only CSS I have for this form is:
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
This is what I am trying to accomplish:
Any help or advice would be great and highly appreciated, I am really just dumbfounded by this one. I tried using some of the centering methods for tables, none of which worked.
check this i just positioned it with css
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
position: relative;
bottom: 2px;
}
input{
position: relative;
margin-top: 10px;
}
.text{
display: flex;
justify-content: center;
}
.text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="text-align:center">
<form>
<div>
<label> Name:</label>
<input type="text" name="Name" size="40"/>
</div>
<div>
<label style="left:27px"> Address:</label>
<input type="text" name="Address" size="50" style="left:27px;"/>
</div>
<div>
<label style="right: 46px;">City: </label>
<input type="text" name="City" size="25" style="right:46px;"/>
</div>
<div>
<label style="right:48px">State:</label>
<input type="text" name="State" size="25"/ style="right: 49px;">
</div>
<div>
<label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
</div>
<div>
<label style="bottom: 0px;" > Email:</label>
<input type="text" name="Email" size="40"/>
</div>
<div style="right: 180px; position: relative;" >
<label>Subscribe to our mailing list?</label>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div class="text">
<br>
<br>
<label style="top: 60px; left: 70px;"> Comments: </label>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px; position: relative;"></textarea>
<br/>
<br/>
</div >
<div class="submit" style="right: 80px; position: relative;">
<input type="submit" width="" />
<input type="reset" />
</div >
</form>
</div>
<script src="test.js"></script>
</body>
</html>
For centering things, try:
margin: auto;
justify-content: center;
text-align: center
This should align all the contents in the page as well as the text also with margins being equal.
Second option:
margin: auto;
width: 80%
This will take only 80% of total width of parent element and will automatically be centered if that also doesn't work then remove margin: auto from second option.
To center align, give the elements you want to align a class of "center", and then select the class in CSS. An example is :
.center {
text-align: center;
}
<div>
Email: <input type="text" name="Email" size="40" class="center"/>
<br/>
</div>
EDIT : W3 Schools is where I found the answer.
Im using flex to format input on a row format. But right now im trying to put label on top of those inputs and its not working. Im tried using display block and floating left or right but still remains on the left side. How should i style label so it floats to the top of those inputs?
This is the snippet:
.box {
padding-top: 1rem;
}
.inside-box {
max-width: 51rem;
margin: 0 auto;
}
.form-group {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.razao-social-content {
flex: 2 1 auto;
/* grow shrink basis */
}
.rua-content {
flex: 6 1 auto;
}
.municipio-content {
flex: 4 1 auto;
}
.numero-content {
flex: auto 1 auto;
}
.bairro-content {
flex: 4 1 auto;
}
.telefone-content {
flex: 1 1 auto;
}
.email-content {
flex: 1 1 auto;
}
.categoria-content {
flex: 2 1 auto;
}
.controlador-content {
flex: 2 1 auto;
}
label {}
<div class="box">
<div class="inside-box">
<form action="" class="form-group">
<div class="row">
<label class="lb" for="name">Razão Social</label>
<input class="razao-social-content" type="text" id="name" placeholder="Informe o seu nome" required>
<label class="lb" for="cnpj_distribuidor">CNPJ</label>
<input class="cnpj-content" type="text" id="cnpj_distribuidor" placeholder="CNPJ" required>
</div>
<div class="row">
<label for="rua">Rua</label>
<input class="rua-content" type="text" id="rua" placeholder="Nome da rua" required>
<label for="municipio">Município</label>
<input class="municipio-content" type="text" id="municipio" placeholder="Nome do Município" required>
<label for="numero">Número</label>
<input class="numero-content" type="text" id="numero" placeholder="Número da Residência" required>
</div>
<div class="row">
<label for="bairro">Bairro</label>
<input class="bairro-content" type="text" id="bairro" placeholder="Nome do Bairro" required>
<label for="uf">Estado</label>
<input class="uf" type="text" id="uf" placeholder="Estado" required>
<label for="cep">CEP</label>
<input class="cep-content" type="text" id="cep" placeholder="CEP" required>
</div>
<div class="row">
<label for="telefone1">Telefone</label>
<input class="telefone-content" type="text" id="telefone1" placeholder="Telefone" required>
<input class="telefone-content" type="text" id="telefone2" placeholder="Telefone" required>
<input class="telefone-content" type="text" id="telefone3" placeholder="Telefone" required>
<input class="telefone-content" type="text" id="telefone4" placeholder="Telefone" required>
</div>
<div class="row">
<label for="email1">Email</label>
<input class="email-content" type="text" id="email1" placeholder="Email" required>
<input class="email-content" type="text" id="email2" placeholder="Email" required>
<input class="email-content" type="text" id="email3" placeholder="Email" required>
<input class="email-content" type="text" id="email4" placeholder="Email" required>
</div>
<div class="row">
<label for="categoria">Categorias</label>
<input class="categoria-content" type="text" id="categoria" placeholder="Informe as Categorias" required>
<label for="data_constituicao">Data Da Constituição</label>
<input class="data-content" type="date" id="data_constituicao" placeholder="Data da Constituição" required>
<label for="data_cvm">Data da CVM</label>
<input class="data-content" type="date" id="data_cvm" placeholder="Data do CVM" required>
</div>
<div class="row">
<label for="controlador">Controlador</label>
<input class="controlador-content" type="text" id="controlador" placeholder="Nome do Controlador" required>
<label for="cnpj_controlador">CNPJ</label>
<input class="cnpj-content" type="text" id="cnpj_controlador" placeholder="CNPJ" required>
</div>
</form>
</div>
</div>
This image link shows how I want it to be
https://www.figma.com/file/nuLJYzwr2LtoJxt4rPKDaI/Untitled?node-id=0%3A1
Just wrap label and input inside a div and add :
.row > div {
display: flex;
flex-direction: column;
}
I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:
create a label element selector to float to the left with block
display set text alignment to right assign width of 8em set an
appropriate amount of padding configure and input element and
textarea element selectors with block display of 12em bottom margin
Here is the code I have so far:
form{
float:left;
display:block;
text-align:right;
width:8em;
}
input {
display: block;
margin-bottom:1em;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
.form{
margin-left: 12em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.
Here's the working fiddle: https://jsfiddle.net/qptgsc1e/
Just some minor changes, Replace this CSS and HTML and you're good to go.
If you want to see the code changes Check it here
form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>
First lets start with fixing your HTML.
This line is formatted wrong.
<input type="email" name="email" id= value"" required> <br>
Needs to be
<input type="email" name="email" id="" value="" required> <br>
To be.
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
Now that we have that fixed as well as some spacing we can start on centering the submit button.
Now we will wrap the submit button with a div
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.
.buttonHolder{ text-align: center; }
Final HTML:
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>
Check if this style works for you.
form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
min-width: 180px;
}
label{
display: block;
}
input {
display: block;
margin-bottom:1em;
}
input[type="submit"]{
display: block;
margin: auto;
width: auto;
min-width: 50px;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css