Here is my HTML:
<form action="#" class="six columns push_two contact-form">
<label>
<span>Name</span>
<input type="text" name="name" />
</label>
<label>
<span>Email</span>
<input type="email" name="email" />
</label>
<label>
<span>Phone number</span>
<input type="text" name="phone" />
</label>
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
<input type="submit" name="submit" value="Send" />
</form>
And CSS:
label{
display: table;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
span{
display: table-cell;
font-weight: 700;
font-size: 20px;
}
input, textarea{
display: table-cell;
width: 100%;
}
In result I get something like the screenshot bellow. I have marked the spans with red border. They wider than I want. I did not set any width, margin or padding to them. But still they are wider. Can you give me a solution to this so that the spans become the size of the text width.
I want something like bellow:
You need to specify a table row, for table cells to behave. Try this:
form {display: table;}
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
Updated answer:
label{
display: block;
width: 100%;
border-bottom: solid #333 1px;
padding: 10px;
}
span{
display: inline-block;
padding-right: 15px;
font-weight: 700;
font-size: 20px;
}
input, textarea{
}
Instead of the display as table for span you need to use table-row.
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
Related
These input text are already stacked vertically but they're not in-line along with the other text. Image:[1]: https://i.stack.imgur.com/UicEL.png
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
margin-left: 30%;
}
<form action="https://google.com/search">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>
What made it stack vertically was exactly the code:
display: block;
margin-left: 30%;
This looks to have been answered previously HERE - something like this might work for you, adding display:grid to the parent element.
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
margin-left: 30%;
vertical-align:top;
}
#advanced {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:10px;
}
#advanced.settings label { text-align:left; }
#advanced.settings label:after { content: ":"; }
<form action="https://google.com/search">
Find pages with...<br/><br/>
<div id="advanced">
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>
Below code was done in Codepen. Here is link: https://codepen.io/andyzam/pen/mdVvrLB
When I resize the window, the items in the table resize properly. But the radio buttons, checkboxes, and text area inputs stay fixed. How do I get those to move?
Do I need to add something to the #radio, #checkboxes, and #textarea IDs? I tried using # radio label {} and using different display properties but they still remained stationary.
body{
background: lightblue;
font-family: monospace;
margin: 0px;
}
p {
text-align: center;
font-size: 14px;
}
#title {
text-align: center;
}
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
input {
width: 250px;
}
label {
font-size: 14px;
margin-right: 0px;
}
table {
margin-left: auto;
margin-right: 35em;
}
td {
text-align: right;
width: 250px;
padding: 10px;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
input:valid {
border: 2px solid black;
}
select {
width: 260px;
}
select:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
select:valid {
border: 2px solid black;
}
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="radio"] {
width: 20px;
}
#checkboxes {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="checkbox"] {
width: 20px;
}
#text-field {
display: block;
margin-left: 45em;
padding: 10px;
}
#submit-button {
text-align: center;
padding: 20px;
}
<html>
<body>
<title>TikTok User Survey</title>
<main>
<h1 id="title">TikTok User Survey</h1>
<p id="description">We are gathering information from various TikTok users to gauge their satisfaction with the social media platform.</p>
<p> All fields are required.</p>
<form id="survey-form">
<table>
<tr>
<td><label for="name" id="name-label">Your name:</label></td>
<td><input type="text" id="name" name="name-label" placeholder="Your Name" required></td>
</tr>
<tr>
<td> <label for="email" id="email-label">Enter your email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Email" required></td>
</tr>
<tr>
<td> <label for="number" id="number-label">How many followers:</label></td>
<td><input type="number" id="number" name="number" placeholder="No. of Followers (0-100k)" required min="0" max="100000"></td>
</tr>
<tr>
<td>
<label for="age">How old are you?:</label></td>
<td>
<select id="dropdown" name="age" required>
<option disabled selected value> -- select an option -- </option>
<option value="under13">Under 13</option>
<option value="13-20">13-20</option>
<option value="20-30">20-30</option>
<option value="over30">Over 30</option>
</select>
</td>
</tr>
</table>
<p>My gender:</p>
<div id='radio'>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<p>Favorite types of videos:</p>
<div id="checkboxes">
<input type="checkbox" id="dancing" name="dancing" value="dancing">
<label for="dancing">Dancing</label><br>
<input type="checkbox" id="cooking" name="cooking" value="cooking">
<label for="cooking">Cooking</label><br>
<input type="checkbox" id="pranks" name="pranks" value="pranks">
<label for="pranks">Pranks</label><br>
</div>
<p>Any additional comments about what you like:</p>
<div id="text-field">
<textarea name="message" rows="10" cols="30">I also like....</textarea>
</div>
<div id="submit-button">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</main>
</body>
</html>
Your problem is that you set a fixed margin-left on your radio buttons.
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
If you want to center your items perhaps you should do like you do with the description and use auto:
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
However an even better way might be to give a flexbox value to the containing element and then you can center elements from there if that is how you wish to position them.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox isnt defined by horizontal or vertical centering since you can change the direction of centering. But in a default case justify-content: center; will center horizontally and align-items: center; will center vertically.
Outside of this i would also sugest you style using classes instead of ids. Classes can be repeated in more than one place and that is something you will appreciate when styling something like a checkbox that is likely to exist at several places.
How can I align this code:
CSS:
input {
border: none;
}
input.name {
color: #f39200;
background: url('../images/name.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 1px;
padding-left: 100px;
font-size: 24px;
}
input.company {
vertical-align: middle;
color: #f39200;
background: url('../images/company.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 0px;
padding-left: 140px;
font-size: 24px;
}
HTML:
<form id="contact-form" action="contact.php" method="post" style="list-style-type: none; width: 400px;">
<input type="hidden" name="redirect" value="/sent" />
<ul>
<li>
<input type="text" name="name" class="name" value="" />
</li>
<li>
<input type="text" name="company" class="company" value="" />
</li>
</ul>
</form>
I want to align them next to each other. So it will look something like this:
http://dflzqrzibliy5.cloudfront.net/images3/contact-form-generator.png
The first two are next to each other the others are not.. etc..
You could use float:left; and display: inline-block;. And you should check the width of the form and the width + padding of the input fields.
Here is a JSFiddle.
Try this:
ul li{
display: inline-block;
}
I've got this HTML form:
<form method="post" action="#" class="cf">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>
And this is my CSS:
/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
form > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
background: rgba(255, 0, 0, .2);
}
.right {
background: rgba(0, 255, 0, .2);
}
form {
background: #ccc;
}
input[type="text"],
textarea {
width: 100%;
border: none;
}
input[type="text"] {
margin-bottom: 10px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
#media only screen and (min-width: 600px) {
form {
background: rgba(0, 0, 255, .3);
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
input[type="submit"] {
clear: both;
}
}
Fiddle
http://jsfiddle.net/gRRmh/
Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working.
The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.
Setting it to height: 100%; does not work for two reasons:
The height of the label needs to be taken into account. Sure I could just give it a height in percentages and subtract that value from the textarea's height (10% / 90%) ...
...but for this to work, one parent elements needs a fixed height, so I need to give the form e.g. a height of 200px. The problem with that is I actually need to match the height of the left column by hand which isn't really a good solution.
So what I am actually looking for is something like the following, just without nudging pixels by hand:
(also with fiddle if you want, but please note: Its a bit messy. http://jsfiddle.net/mnBEh/1/)
How to solve this problem?
It is only posible by giving manually height to textarea.So give height to textarea on media queries.
Try this. It uses CSS tables, but I think it gets the result you're looking for, by setting the textarea to be 100% height, and then minusing the height of it's label. But for some reason, the height is only calculating correctly in Chrome, even though the other browsers supposedly support it.
http://jsfiddle.net/73cyorL1/
CSS:
.table {
display: table;
width: 100%;
}
.row {
display:table-row;
width: 100%;
}
.left {
background: red;
}
.right {
background: blue;
}
label {
display: block;
padding: 10px;
font-family: arial;
font-style: italic;
font-size: 0.75em;
line-height: 1em;
}
form {
background: grey;
}
input[type="text"], textarea {
width: 100%;
border: none;
background: #ccc;
font-family: arial;
padding: 10px;
box-sizing: border-box;
display: block;
}
input[type="text"]:focus, textarea:focus {
outline: 0;
background: #ddd;
}
input[type="submit"] {
display: block;
margin: 10px;
padding: 10px;
cursor: pointer;
}
#media only screen and (min-width: 600px) {
.left {
width: 50%;
height: 100%;
display: table-cell
}
.right {
width: 50%;
height: 100%;
display: table-cell;
overflow: hidden;
}
textarea {
height: calc(100% - 0.75em);
/* 100% fill height, minus height of details label */
}
}
HTML:
<form method="post" action="#" class="table">
<div class="row">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required="required" class="last" />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>
Set "box-sizing: border-box;" and it will works
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>