This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 5 years ago.
I am trying to create a form at the moment, that ideally with flex responds to the number of inputs with a group,
So I have a form setup like this:
<fieldset class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</fieldset>
<fieldset class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</fieldset>
<fieldset class="form__group">
<input type="text" class="form_input" />
</fieldset>
What I am trying to achieve is that the container does not care how many children it has but will allow them to fill the available space evenly in a single row.
So 2 items get 50% (minus a but for margins/padding), 3 items get 33.3% and 1 item 100% etc etc etc,
My CSS looks like this,
.form__group {
display: flex;
}
.form__input {
flex: 1 1 0;
background: #fff;
color: #939598;
border-radius: 30px;
box-shadow: none;
border: 1px solid #f1f2f2;
padding-left: 15px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
}
Which I thought would allow me to put children inline on the same row and allow flex to sort out widths and spacing?
Here is my WIP at the moment,
https://codepen.io/87Development/project/editor/AoNJzN/
So using flex how can create a row of inline form inputs that are equally spaced and widthed, without knowing how many elements may be in each form__group?
fieldset can present some issues with rendering...use a div instead.
Fieldset # MDN
* {
box-sizing: border-box;
}
.form__group {
display: flex;
}
.form_input { /* note the single underscore */
flex: 1;
background: lightgrey;
color: #939598;
border-radius: 30px;
box-shadow: none;
border: 1px solid #f1f2f2;
padding-left: 15px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
}
<div class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</div>
<div class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</div>
<div class="form__group">
<input type="text" class="form_input" />
</div>
Related
I have a form with several input radio type:
<form class="search" action="{{ url_for('np.bkg') }}" method="post">
<input type="text" name="query" style="max-width:700px" placeholder="Search over bkg..." id="query" value="{{query}}" autocomplete="on" required>
<button type="submit"><i class="fa fa-search"></i></button>
<div>
<input type="radio" name="searchType" id="kmatch" value="kmatch" checked="checked"> match </input>
<input type="radio" name="searchType" id="kextraction" value="kextraction"> extract </input>
</div>
</form>
In my css I have this:
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 100%;
background: #f1f1f1;
border-radius: 15px;
}
Now, my question, how to create a different css style for the 2nd input radio type? The current 'input' css element will apply to both radio boxes.
EDIT: I think my css only applies to the first input type='text' tag. So the question is the same, how to make different css styles for 2 different input radio tags?
Try this (for more attractive and user-friendly layout):
<style>
.radio-label{
border: 1px solid #abc;
border-radius: 4px;
padding: 7px 7px 5px 3px;
cursor: pointer;
box-shadow: 0 0 10px #abc;
}
.radio-label.radio-1{
background-color: #ddf;
}
.radio-label.radio-2{
background-color: #eed;
}
</style>
<label class="radio-label radio-1" for="radio-1"><input type="radio" name="radio-btn" id="radio-1" >Radio 1</label>
<label class="radio-label radio-2" for="radio-2"><input type="radio" name="radio-btn" id="radio-2" >Radio 2</label>
EDIT: You can also play with radio inputs with:
.radio-label input{
width: 20px;
height: 20px;
position: relative;
top: 4px;
}
for different styles, you can either give the two elements two different classes and define style for those classes :
.radio-input1{
width:20px;
height:20px;
}
.radio-input2{
width:10px;
height:10px;
}
or you can give the two inputs, two different ids and repeat the above code:
#radio1{
width:20px;
height:20px;
}
#radio2{
width:10px;
height:10px;
}
for classes:
<input class="radio-input1">
for id :
<input id="radio1">
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.
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/
I have been trying to edit this easy form to just look good for 3 hours now and Im still not quite there. I want the input fields to be on the same row as the labels naturally, but somehow the inputs are a bit lower than the labels and I cant seem to edit them with margins. What am I doing wrong?
Heres a snaggy picture of what the form looks like:
// CONTACT FORM
<label for="name"><p>Name:</p></label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject"><p>Subject:</p></label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments"><p>Comments:</p></label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
// CSS
label {
float: none;
font-size: 100%;
width: 250px; /* just this width evens out input box placement */
font-weight: bold;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 250px;
padding:5px;
margin-top: -10px;
}
textarea {
width: 250px;
height: 150px;
resize:none;
}
guestbook {
margin-top:50px;
text-align:center;
font-size:26px;
color:#05924b;
font-family:Gisha;
}
gb p {
color:#05924b;
font-family:Gisha;
text-align:left;
margin-left:85px;
margin-top:0px;
margin-bottom:0px;
}
// SOLUTION: Removed the "p" paragraph from within the form and adjusted the rest from CSS, added float:left to the different inputs fields and rows, lowered the label width so the input came closer, then calculated and put the correct margin-right to both input{} and textarea{} and last to #submit to get everything in nice order.
Heres a screenshot from the new code: http://snag.gy/PwpbQ.jpg
// CSS
/* Input */
label {
float: left;
font-size: 100%;
width: 50px; /* just this width evens out input box placement */
font-weight: bold;
margin: 2px 0;
padding:5px;
font-family: Gisha;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-align: left;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 300px;
padding:5px;
margin: 5px 0;
font-size:24px;
margin-right:192px;
}
textarea {
width: 300px;
height: 150px;
resize:none;
margin:5px 0;
padding:5px;
margin-right:192px;
}
#submit {
margin-right:225px;
}
/* End of input */
Remove all of the <p> tags from the labels. A <p> tag is a block level element, therefore it should not be nested within the inline element <label>. Block level elements also clear, meaning they do not allow content on either side (unless floated). I believe this is causing your issue.
<label for="name">Name:</label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
Once the markup has been adjusted the label and input tags have no vertical spacing. To add vertical spacing you can add a margin to both elements.
label {
font-size: 100%;
width: 250px;
font-weight: bold;
margin: 2px 0;
}
input {
width: 250px;
padding:5px;
margin: 2px 0;
}
Example: http://jsfiddle.net/KZrXD/
What would be a proper css method to make the following so it is the same with the exception that the text input fields vertically line up along their left side?
So the check boxes will still be right up against the input fields and in between the label and input fields, but the input fields still all light up.
Current HTML:
<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>
Current CSS:
label {
font-size: 90%;
float:left;
width: 15em;
}
Why not just use a negative margin?
.checkbox {margin-left: -16px;}
Depending on the rest of your setup might require a bit of tweaking for cross-browser pixel-perfectness.
I would personally probably also just float both the labels and the inputs and get rid of the <p>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display: block;
font-size: 90%;
width: 15em;
clear:left;
}
label, input {
float:left;
}
input[type=checkbox]
/* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
{
margin-left: -2em;
}
</style>
</head>
<body>
<form>
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
<label for="search_server">Server:</label>
<input type="checkbox" name="server_like" />
<input id="search_server" type="text" name="Server" />
<label for="search_host">Host:</label>
<input id="search_host" type="text" name="Host" />
</form>
</body>
</html>
Do this.
HTML Markup:
<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>
Css Markup:
fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}
Then add a width to your form, depending on the input sizes, with your checkbox, just float it in between and use margins.
I would do something like this;
<div class="label">Uri:</div><div class="field"><input type="text" /></div>
Then give the div with the class 'label' an default width and float them next to eachother.
EDIT: Saw you changed your post;
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
Your css could be something like
label
{
width: 150px;
float:left;
clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
float:left;
}
If your form is small, you can just use a <table>.