I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
Related
I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
I am having a problem sorting this one out.
Here's my HTML
<form>
<p><label for="comp-name">Name:</label>
<input type="text" name="comp-name"></input>
</p>
<p>
<label for="company-address">Address:</label>
<textarea name="company-address"></textarea>
</p>
<p>
<label for="postcode">Postcode:</label>
<input type="text" name="postcode"></input>
</p>
<p>
<label for="phone">Phone Number:</label>
<input type="text" name="phone"></input>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email"></input>
</p>
</form>
Here is what I want the form to look like:
I'm having hard time figuring out how to place the label on the top-left part of the input/textarea.
If I understand correctly, a simple:
label {
vertical-align: top;
}
should give you the results you want.
Fiddle: http://jsfiddle.net/N7e67/2/
You can just put the labels in the left column of a table and the fields in the right, then position them within their cells
<table>
<tr>
<td>(label)</td>
<td>(input)</td>
</tr>
...
</table>
Try to put your lable and input type inside the div tag
<p><div><label for="comp-name">Company Name:</label></div>
<div> <input type="text" name="comp-name"></input></div>
</p>
this should help you. if this si not what you expect please elaborate what you want to see.
You can try using this boilerplate http://www.csskarma.com/lab/contactForm/ or this tutorial http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/
PS : for your information, the label for attribute should reference an id of an input.
PPS : you might find this article interesting http://www.lukew.com/ff/entry.asp?1502
you can use this code for positioning your object:
style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"
change the left, top, height and width as per form design.
<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>
The easiest is to put the <input> inside the <label>
<div>
<label for="comp-name">Company Name: <input type="text" name="comp-name" />
</label>
</div>
You have two options for placing label and input.
1) You can place the label and the input next to each-other as siblings.
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
2) You can place the input element inside the label so that the label becomes the parent element and the input the child element of the label.
<label>Do you like cheese?
<input type="checkbox" name="cheese">
</label>
Both solutions are valid HTML according to MDN, but when you go for solution one you need to explicitly link the label to the input element by adding an id to the input element and for attribute to the label element.
When you choose the second option you don't need to do this since the DOM automatically knows (because of the parent child relationship) that the label and element are related to each-other. That I would consider a clear advantage of the second solution.
Note. With css you can get the desired styling result for either of those solutions, so I would not use that as an argument for choosing between 1 and 2.
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
I have a site that I'm creating, part in static HTML, the other part is served via Django. Since I want the look and feel to remain the same (who doesn't?) I have used CSS for the static site. That same CSS I have included (almost successfully) in the dynamic site.
When I create a form, I can get a very nice two column listing on the static side
Label Input
Label Input
Label Input
But, when I do the same code on the dynamic side, it's not so nice
Label Input
Label Input
Label Input
The CSS I'm using is:
form.login label.fixedwidth {
display: block;
width: 240px;
float: left;
}
\.
Sorry, here's my form:
<form action="" method="post" class="login">
<fieldset>
<div>
<label for="username" class="fixedwidth">User name:</label>
<input type="text" name="username" value="" id="username">
</div>
<div>
<label for="password" class="fixedwidth">Password:</label>
<input type="password" name="password" value="" id="password">
</div>
<input type="submit" value="login" />
</fieldset>
</form>
[edit]
So, I noticed that my two 'input type' lines didn't close the tag (no '/'). But, no difference.
[/edit]
Try
clear:both; overflow: auto
on the surrounding DIV.
By the way, a <ul> with <li> s may be semantically more fitting than <div>s here. Won't make a difference in the output though.
I have a form which contains several checkboxes align vertically in a div. I want to remove the space between each checkbox. But I can't find any solutions.
<div style="height:100px;width:25px;float:left;">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
Does anyone have any solution to this problem?
I found the solution:
<input type="checkbox" style="margin: 0; padding 0; height:13px"/>
For IE, you need to set the height to remove the space between checkboxes.
After talking to Paul O'B, a CSS guru, this is a good solution that works in IE 6, 7, 8, FF 3, and Chrome:
<style type="text/css">
#aDiv input {
margin: 0;
padding: 0;
display:block;
height:12px;
overflow:hidden
}
</style>
<div id="aDiv" style="width:25px">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
This is using a doctype of HTML 4.01 strict. if you want side-by-side borders for the checkboxes, use a height of 13px.
The attribute selector won't work on IE 6 so it is taken out here. If you need to add other input element that is not a checkbox, use class instead.
Probably newlines between <input> tags are interpreted as any other whitespaces, that's why you see spaces between them. I think CSS rules has nothing to do with it.
Edit: Further investigation leads me to conclusion that whitespaces would only affect horizontal gaps. As of vertical space I believe it is impossible to assure that checkboxes will stick together without using custom graphics — web browsers are not obligated to make them perfectly square by standards, so even if you will find a way to make their bounding boxes touch each other, effect might not be satisfactory.
To make their bounding boxes as close as possible set line-height attribute for div element. With original sprites it doesn't look like you wanted it to in any browser I have tested.
Using custom graphic of some height, and identical line-height should do the trick.
Another edit: Some people here proposed using fixed height of input element of 13px. Remember! It is wrong. You can't rely on a fact, that some browsers have built-in checkbox sprite of that height.
There is white-space between each checkbox. The only way to remove it is to float them:
<style type="text/css">
.myCheckBoxDiv > input[type="checkbox"]
{
float: left;
}
.myCheckBoxDiv:after
{
clear: both;
content: "";
display: block;
}
</style>
<div class="myCheckBoxDiv">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
This worked for me:
<style type="text/css">
body,html,input {padding:0;margin:0;}
</style>
<div style="height:100px;width:25px;float:left;">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
Edit: It's valid css now :)
Just set:
<input type="checkbox" style="margin: 0">
But it will not work in IE.
I think different browsers renders the html elements differently. So, it becomes difficult to get a complete hold on the situation.
However, I found one solution but this time we need to apply some trick on the body element.
The CSS will be like this:
<style type="text/css">
input.mycheckbox {
height: 13px;
width: 13px
}
body {
font-size: 40%;
}
</style>
And the contents within body tag is:
Hope this helps.