Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
Related
https://codepen.io/anon/pen/jgWdMW
I'm trying to align the inputfields so that they start all at the same point, I've tried multiple things since yesterday, positioning is harder than I thought..
A Survey Form
<p id="description"> Let us know how we can improve FFC</p>
<div class="labels">
<div>
<label for="name">* Name: </label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="one">
<label for="email">* Email: </label>
<input type="text" id="email" placeholder="enter your mail">
</div>
<div>
<label for="age">* Age: </label>
<input type="number" id="email" placeholder="Enter your Age">
</div>
<div>
<label for="Number">* Number: </label>
<input type="text" id="Number" placeholder="Enter your Number">
</div>
</div>ยด
One option is to define a width for your labels, this means they all take up the same amount of space next to the input boxes. For this you need the following css:
label {
display: inline-block;
width: 100px;
}
There's also a slight issue with the "Age" box being slighly larger than the others due to the number input and padding (for me on firefox at least). You could set a width on the input boxes to fix this e.g.
input {
padding: 8px;
margin: 12px;
width: 200px;
}
Codepen
I am trying to get these text boxes to align in a neat order with one another in order to actually look nice, however upon browser viewing they're scattered all over the place. Below is my textbox declaration:
Enter ISBN to update: <input type="text" name="isbn" placeholder="Enter ISBN..."> <br><br>
Title <input type="text" name="titleUpdate " placeholder="Enter Updated Title..."> <br><br>
Author <input type="text" name="authorUpdate" placeholder="Enter Updated Author..."> <br><br>
Genre <input type="text" name="genreUpdate" placeholder="Enter Updated Genre..."< <br><br>
Year Published <input type="text" name="yearUpdate" placeholder="Enter Updated Year..."<br><br>
<!--ISBN <input type="text" name="isbnUpdate" placeholder="First name"<br><br>-->
I feel as though I need to do some CSS magic however I'm not so sure as to what I need to do.
I think you are off to a good start. There are some errors in your HTML, a couple of the items have wrong closing tags. What you want to do is structure the markup a little to give you some control. Take for instance this markup:
<div class="field">
<label for="isbn">Enter ISBN to update:</label>
<input type="text" id="isbn" name="isbn" placeholder="Enter ISBN...">
</div>
<div class="field">
<label for="titleUpdate">Title</label>
<input type="text" id="titleUpdate" name="titleUpdate" placeholder="Enter Updated Title...">
</div>
<div class="field">
<label for="authorUpdate">Author</label>
<input type="text" id="authorUpdate" name="authorUpdate" placeholder="Enter Updated Author...">
</div>
<div class="field">
<label for="genreUpdate">Genre</label>
<input type="text" id="genreUpdate" name="genreUpdate" placeholder="Enter Updated Genre...">
</div>
<div class="field">
<label for="yearUpdate">Year Published</label>
<input type="text" id="yearUpdate" name="yearUpdate" placeholder="Enter Updated Year...">
</div>
Notice how we wrap the text for the text fields as labels. I grouped a label and input field together in its own . Once you have your HTML structure, we can adjust how it looks. For example, aligning all the labels to the left, and then align the boxes to right would "align in a neat order". One way of doing this by using this css:
.field {
margin-bottom:10px;
width:400px;
clear:both;
}
label {float:left;}
input[type=text] {float:right; width:200px;}
Take a look at this codepen as an example - https://codepen.io/anon/pen/vwmRbv
I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)
Here's a JSFiddle of what I have started.
<div>
<label for="WebName">Name</label>
<input type="text" id="WebName" />
</div>
<div>
<label for="WebEmail">Email</label>
<input type="text" id="WebEmail" />
</div>
<div>
<label for="WebPhone">Phone</label>
<input type="text" id="WebPhone" />
</div>
<hr />
<div style="border: 1px solid black; overflow: hidden;">
<!-- left -->
<div style="width: 500px; float:left; border: 1px solid red;">
<label for="ClientFirstName">Client First Name*</label>
<input type="text" id="ClientFirstName" />
<label for="ClientBirthDate">Client Birth Date</label>
<input type="text" id="ClientBirthDate" />
</div>
<!-- right -->
<div style="float:left; width: 500px; border: 1px solid green;">
<label for="ClientLastName">Client Last Name*</label>
<input type="text" id="ClientLastName" />
<label for="ClientAge">Client Age</label>
<input type="text" id="ClientAge" />
</div>
</div>
<hr />
<div>
<label for="AppointmentDate">Appointment Date</label>
<input type="text" id="AppointmentDate" />
<label for="Goals">Goals</label>
<textarea id="Goals" rows="4" cols="80">
</textarea>
</div>
I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.
<div class="inputWraper">
<label for="thisInputName">Some Text</label>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</div>
You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.
<label for="thisInputName">
<span>Your label text</span>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</label>
I am making a copy of a pen-and-paper character sheet for a RPG, as a way of learning html/css. However I got stuck right at the beginning when trying to style a form, holding some background information about the character.
Currently I've managed to make my form of labels and input-fields to look like the picture to the left. However the pen-and-paper character sheet (and the desired look) is formatted like the one on the right.
Below is the code I'm using.
.sheet-character-background form input,
label {
margin-bottom: 10px;
}
.age-input {
width: 60px;
}
<div class="sheet-character">
<div class="sheet-character-background">
<form>
<label>Name</label>
<input type="text" name="attr_name">
<br>
<label>Race</label>
<input type="text" name="attr_race">
<br>
<label>Gender</label>
<input class="gender-input" type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
<br>
<label>Religion</label>
<input type="text" name="attr_religion">
<br>
<label>Occupation</label>
<input type="text" name="attr_occupation">
<br>
<label>Archetype</label>
<input type="text" name="attr_archetype">
<br>
<label>Environment</label>
<input type="text" name="attr_environment">
<br>
<label>Background</label>
<input type="text" name="attr_backgrund">
</form>
</div>
</div>
What are the steps for going from what I have to what I want? I played around with surrounding each "row" with a <div> and class and setting their width in css. However this didn't work out so I reverted to my initial version and got stuck.
Many people would probably suggest to get a css framework, but what you want can be done with some simple css.
First, your html basically consists of a form with a series of rows, except for one row where it consists of two fields in one row. So I modified your html slightly that each row is wrapped by a div with a class as .form-row and delete the <br> (let css to do the rendering instead of using html tag):
To achieve what you want will then come down to set a width for the form, and how each row will behave, and set the width of input, and last override the setting for the special case of .age-input.
This is just a 'quick-and-dirty' way to achieve what you want, hopefully it provide you some ideas and suggestions in your learning.
form {
width: 300px;
}
.form-row {
display:flex;
}
input {
width: 100%;
}
.age-input {
width: 60px;
}
<form>
<div class="form-row">
<label>Name</label>
<input type="text" name="attr_name">
</div>
<div class="form-row">
<label>Race</label>
<input type="text" name="attr_race">
</div>
<div class="form-row">
<label>Gender</label>
<input type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
</div>
<div class="form-row">
<label>Religion</label>
<input type="text" name="attr_religion">
</div>
<div class="form-row">
<label>Occupation</label>
<input type="text" name="attr_occupation">
</div>
<div class="form-row">
<label>Archetype</label>
<input type="text" name="attr_archetype">
</div>
<div class="form-row">
<label>Environment</label>
<input type="text" name="attr_environment">
</div>
<div class="form-row">
<label>Background</label>
<input type="text" name="attr_backgrund">
</div>
</form>
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>