'Align vertically checkboxes with the input fields and labels
I have a form created with react and formik,and the problem is that i can not center elements as shown in the mockup.
It should be this way:
But i have this result:
Could anyone help me please? I dont understand what im doing wrong..
I centered the input but label and checkboxes with radiobuttons arent aligned,i tried :
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
but it's doing nothing,only this works:
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
display: block;
width: 400px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
/* margin-bottom: 20px; */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
HTML Structure:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="App">
<form action="#">
<div class="settings">
<div class="form-control">
<div class="row"><label for="firstName">First Name</label><input name="firstName" id="firstName"
class="input-field" type="text" placeholder="First Name" value=""></div>
</div>
<div class="form-control">
<div class="row"><label for="lastName">Last Name</label><input name="lastName" id="lastName"
class="input-field" type="text" placeholder="Last Name" value=""></div>
</div>
<div class="form-control">
<div class="row"><label for="age">Age</label><input name="age" id="age" class="input-field"
type="text" placeholder="Age" value="" style="border-color: red;"></div>
<div class="error">age is a required field</div>
</div><label class="checkbox" for="employed">Employed<input type="checkbox" name="employed"
label="Employed" id="employment" value="false"></label>
<div class="form-control">
<div class="row"><label for="favoriteColor">Favorite Color</label><select name="favoriteColor"
id="favoriteColor" class="select-field">
<option value=""></option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="grey">Grey</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="pink">Pink</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="beige">Beige</option>
<option value="navy blue">Navy blue</option>
<option value="maroon">Maroon</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
<option value="aqua">Aqua</option>
</select></div>
</div>
<div class="form-control">
<div class="column">
<div class="checkboxGroup-wrapper"><label>Sauces</label>
<div class="checkbox-wrapper">
<div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
value="ketchup"><label for="ketchup">Ketchup</label></div>
<div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
value="mustard"><label for="mustard">Mustard</label></div>
<div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
value="mayonnaise"><label for="mayonnaise">Mayonnaise</label></div>
<div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
value="guacamole"><label for="guacamole">Guacamole</label></div>
</div>
</div>
</div>
</div>
<div class="form-control">
<div class="radioButtons-column">
<div class="radioButtonsGroup-wrapper"><label>Best Stooge</label>
<div class="radioButtons-wrapper">
<div class="radioButtons"><input type="radio" id="stooge" name="stooge"
value="larry"><label for="larry">Larry</label></div>
<div class="radioButtons"><input type="radio" id="stooge" name="stooge"
value="moe"><label for="moe">Moe</label></div>
<div class="radioButtons"><input type="radio" id="stooge" name="stooge"
value="curly"><label for="curly">Curly</label></div>
</div>
</div>
</div>
</div>
<div class="form-control">
<div class="row"><label for="notes">Notes</label><textarea name="notes" id="notes"
class="notes-field" placeholder="Notes" style="border-color: red;"></textarea></div>
<div class="error">notes is a required field</div>
</div><button type="button" class="button" id="resetButton" disabled="">Reset</button><button
type="submit" id="submitButton" disabled="">Submit</button>
<div style="margin: 1rem 0px;">
<h3 style="font-family: monospace;"></h3>
<pre style="background: rgb(246, 248, 250); font-size: 0.65rem; padding: 0.5rem;">{
"firstName": "",
"lastName": "",
"age": "",
"employed": false,
"favoriteColor": "",
"sauces": [],
"stooge": "",
"notes": ""
}</pre>
</div>
</div>
</form>
</div>
</div>
</body>
CSS:
<style>.App {
display: flex;
justify-content: center;
}
.error {
color: red;
}
.form-control{
line-height: 42px
}
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
display: block;
width: 400px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
/* margin-bottom: 20px; */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.input-field {
}
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.select-field{
/* padding-right: 20px ; */
}
div.error{
display: flex;
align-items: center;
justify-content: flex-end;
margin-top:-15px;
}
.notes-field{
}
.column{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.checkboxGroup-wrapper{
display: flex; /* establish flex container */
flex-direction: row; /* make main axis vertical */
}
.checkbox-wrapper{
/* width: 300px; */
/* margin: 5px; */
margin-left: 20px;
}
.radioButtons-column{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.radioButtonsGroup-wrapper{
display: flex; /* establish flex container */
flex-direction: row; /* make main axis vertical */
}
.radioButtons-wrapper{
/* margin-left: 20px; */
}
Thanks in advance!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|