I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:
Label 1 <input />
sub text for label 1
The code I currently have is as follows:
<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>
CSS:
form { width: 100%; overflow: hidden; margin-top: -20px;}
form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }
form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}
There are a few rows that need to be formatted like this. Thank you for any help you can provide.
<div class="row">
<label for="height">Height <br /><span>(help text here)</span></label>
<input name="height" id="height" ... />
</div>
label {
display: block;
float: left;
}
make the label a block element so you can put a br. not a good solution also but it works :P
Try this :
<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>
It may be a workaround to your issue, but not a perfect solution
How about:
<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>
And CSS:
.row label {
display: inline-block;
width: 40%;
}
.row input {
display: inline-block;
width: 50%;
margin: 0 0 0 5%;
}
.row label.help {
display: block;
}
JS Fiddle demo.
Related
I'm looking to create the desired styling in the photo shown. Having trouble getting the custom SVGs I created to be inline with the text field. How would I go about creating this effect?
Here's a snippet of the code I'm using at the minute, where am I going wrong?
I'm mostly using the JQM library if that is of any help.
<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
<img src="img/icon/regicons/usernumber.svg">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Ensure that the <input/> has the same height as your <image/> and position it at top of it's parent element.
height: 32px; box-sizing: border-box;
absolute; top: 0;
Snippet:
input {
height: 32px;
box-sizing: border-box;
position: absolute;
top: 0;
}
.box2 {
display: inline-block;
position:relative;
width: 40vw;
}
<div class="box2" style="">
<img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
<input type="text" name="userNo" id="userNo" placeholder="Number" required>
</div>
I would use a flexbox, which is responsive by nature.
.box2 {
display: flex;
background-color: lightgrey;
align-items: center; /* Vertical alignment */
}
<div class="box2" style="position:relative; width: 40vw;">
<img src="https://via.placeholder.com/50x50/00ff00">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
I am currently converting an old HTML form to not use tables. The label requires a fixed width, which I've achieved using an answer from this site. The current code is as follows:
HTML
<div id="form">
<label for="field1">Name </label>
<input type="text" id="field1" value="default name" />
</div>
CSS
label {
float: left;
width: 50px;
white-space: nowrap;
}
input {
display: block;
overflow: hidden;
width: *;
}
#field1 {
width: 150px;
}
Currently, the label is vertically aligned at the top. How can I vertically align the label and field to the centre?
Edit: I'm getting a lot of answers to basically pad my label into the correct position via a specified number of pixels. I don't want to do that as it's basically hard-coding and not true vertical alignment to the middle.
Following some advice I've received here, I've cleaned up my code some. See the above edited code.
I've tried vertical-align: middle; in label but it doesn't work. Please note that the user's platform will be IE.
If I get this right, You want the label and the input to vertically center align W.R.T each other and not the page. For that, there are couple of ways.
The Flexbox Way
If you want to use something new from the CSS world and be future ready, use flexbox. Example -
.fieldHeading {
width: 50px;
}
.fieldSpan {
overflow: hidden;
}
#field1 {
width: 150px;
}
/*flexbox approach.
* height and background added for clarity.
*/
#form {
height: 100px;
background: #bada55;
display: flex;
align-items: center;
}
<div id="form">
<label for="field1" class="fieldHeading">Name </label>
<span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>
The vertical-align Way
This works well when you have both the label and the input on one line as inline-block elements. Example -
.fieldHeading {
width: 50px;
vertical-align:middle;
}
.fieldSpan {
overflow: hidden;
vertical-align:middle;
}
#field1 {
width: 150px;
}
<div id="form">
<label for="field1" class="fieldHeading">Name </label>
<span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>
The height & line-height Duo
This works well too but if your label is big and has the possibility of wrapping into multiple lines, it's gonna look terrible. Example -
.fieldHeading {
width: 50px;
}
.fieldSpan {
overflow: hidden;
}
#field1 {
width: 150px;
}
/*line-height and height be same for parent
* background added for clarity.
*/
#form {
line-height: 40px;
height: 40px;
background: #bada55;
}
<div id="form">
<label for="field1" class="fieldHeading">Name </label>
<span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>
I hope these help you not only in this problem but for all other vertical alignment problems.
You can use line-height or margin-bottom until you get satisfactory results.
Example
#form label {
line-height:1.4;
margin-bottom:2px;
}
This will apply the selector to all labels under the form. If you want to be specific, you can use the specific css class like .fieldHeading instead of #form label.
Do you need like this?
<div id="form">
<div class="valign">
<label for="field1" class="fieldHeading">Name </label>
<span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>
</div>
<style>
.fieldHeading {
float: left;
width: 50px;
}
.fieldSpan {
display: block;
overflow: hidden;
width: *;
}
#field1 {
width: 150px;
}
#form {display: table;height:100%;}
.valign {
display: table-cell;
vertical-align: middle;
}
</style>
I think, solution margin-bottom, use whatever px you want
.fieldHeading {
float: left;
width: 50px;
margin-bottom: 3px;
}
Use:
.fieldHeading {
display: inline-block;
width: 50px;
vertical-align: middle;
}
#field1 { width: 150px; }
Let span be an inline type.
You don't really need the span for enclosing your input element.
I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>
For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo
You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>
If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example
I have a form input with a label next to it, like this:
<div id="loginbox">
<form>
<div>
<span>Username</span>
<input type="text">
</div>
<div>
<span>Password</span>
<input type="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Then I have some CSS that sets up the width of the login box and the span fields, like so:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox span {
display: inline-block;
width: 80px;
text-align: right;
}
Here is the jsfiddle for this code:
http://jsfiddle.net/7TNNq/
Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?
You could put
#loginbox div input {
width: 70%;
}
it will expand to the edge of the div, but I'm sure there's a better way to go about it.
Hope this helps
See: http://jsfiddle.net/thirtydot/tgGLv/
CSS:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox label {
float: left;
width: 80px;
}
#loginbox span {
display: block;
overflow: hidden;
padding: 0 4px 0 0;
}
#loginbox span input {
width: 100%;
}
HTML:
<div id="loginbox">
<form>
<div>
<label>Username</label>
<span><input type="text"></span>
</div>
<div>
<label>Password</label>
<span><input type="password"></span>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Here it is.
http://jsfiddle.net/7TNNq/35/
Or you can set fixed width as #spike suggested.
Task: Make text box 100% width but allow enough room for button.
Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
<input type="text" name="my-field" />
<input type="button" id="my-button" value="Add +" />
</div>
.field {
margin-right: -70px;
width: 100%;
}
.field input[type=text] {
display: block;
float: left;
margin-right: 70px;
}
.field input[type=button] {
display: block;
float: right;
}
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
.outer-wrap {
margin-right: -300px;
width: 100%;
}
.content {
float: left;
margin-right: 300px;
}
.sidebar {
float: right;
}
What mistake am I making here?
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.
See: http://jsfiddle.net/thirtydot/25bZC/
CSS:
.field > span {
display: block;
overflow: hidden;
padding-right: 10px
}
.field input[type=text] {
width: 100%
}
.field input[type=button] {
float: right
}
HTML:
<div class="field">
<input type="button" id="my-button" value="Add +" />
<span><input type="text" name="my-field" /></span>
</div>
To pull this off you must ensure that the element which you are floating right comes before the one floating left. Like this
<div class="field">
<input type="button" id="my-button" value="Add +" />
<input type="text" name="my-field" />
</div>
try giving fixed width to
field input[type=text]
and
.field input[type=button]