I have a table row with an input field in each cell that is used to filter a column.
How can I remove all padding from the td's in this row so that there is no extra space between the input field borders and the td's containing them ?
Currently the td's containing input field appear much bigger because of this.
Note: This is just needed for one specific row, all other rows will stay standard-formatted.
My tr looks like this:
// ...
<tbody>
<tr>
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
// ...
</tbody>
Many thanks for any help with this, Tim.
Firstly add a class to the :
<tbody>
<tr class="noPadding">
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
</tbody>
Then in your CSS:
.noPadding td { padding: 0; }
If you find you're still getting extra spacing there may be some margins applied to the inputs themselves (depends on your other CSS / browser defaults) if so worth trying:
.noPadding td input { margin: 0; }
Hope this helps.
It looks like what you're seeing is margin created by the form fields by default, try this:
Css to be placed in your style tags in the head:
.noMargin { margin: 0; }
Hint: you can assign margin a minus value to reign in the space more, in this instance:
.noMargin { margin: -2px; }
worked for me (using safari, but will vary by browser)
Your html:
<tbody>
<tr>
<td><input type="text" name="input1" class="noMargin" /></td>
<td><input type="text" name="input2" class="noMargin" /></td>
<td><input type="text" name="input3" class="noMargin" /></td>
</tr>
</tbody>
I hope this helps.
You can use jquery to remove padding of all the table tds where it has text input boxes
$(function () {
$('.myTable').find(':text').parent('td').css('padding','0');
});
as shown in http://jsfiddle.net/WTBsp/1/
Related
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png
You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.
Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>
I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.
I've got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.
I have tried using float right to the em, but it does not work.
I'll appreciate any help.
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
CSS Only solution (which I don't recommend, but works)
The jsfiddle: http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
You'll just have to declare the :after content for nth-child and you'll need to know specifically what you're trying to replace.
This is a JavaScript solution:
Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/
I've expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.
And the code for completeness:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript (using jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});
CSS:
.form-field th em {
display: none;
}
Try something like:
label {
float:left;
}
em {
float: right;
}
input {
float:left;
}
Although this will put the em on the farthest right spot of the parent container. Considering it is in a table it might work as is, can't test unless we have the full HTML with the opening table tags, etc.
If you are unable to do, use HTML5 validation for email in the input field
<input type="email" title="enter the email in correct format" required="true"/>
whenever the user clicks the submit button without entering the email or entered the email in wrong format, the form will not be submitted and error will be displayed.
Here is my code:
<table>
<tr>
<td><input type="text" value="test1" readonly /></td>
</tr>
<tr>
<td><input type="text" value="test2" readonly /></td>
</tr>
<tr>
<td><input type="text" value="test3" readonly /></td>
</tr>
</table>
How do I remove the cursor from the text box?
If the browser shows the insertion caret when the readonly attribute is set on an input[type="text"] element, you may be able to use the caret-color CSS property to make the caret transparent:
.caret-hidden {
caret-color: transparent;
}
<input class="caret-hidden" type="text" readonly>
Poor man's solution: transmit value in a hidden form item (<input type="hidden">) and display it in a regular HTML container (<p></p>, <div></div> or whatever).
The mouse cursor has several CSS values.
To remove the cursor from the textbox you can use the following
<input type="text" value="test2" style="cursor:none" readonly />
By setting it to none, the cursor will not be displayed. But you can also choose to use other styles like cursor:zoom-in. cursor: default etc.
For more CSS cursor values, take a look at the MDN documentation here
Do you mean this :
<input type="text" name="site" value="Stackoverflow" readonly="readonly" />
Demo : http://jsfiddle.net/UuZnh/
i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.