I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
Related
I am trying to make the following working the way I want it to. I want to have an Input element changing its width to the provided cell's width. Here is code:
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<div style="width:100%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</div>
</td>
</tr>
</table>
I want the input in the last cell to take all the width of the cell it's in.
Unless I provide a width of the input it's not happening.
Put width: 100% on the input element itself, not on a div surrounding it (you can get rid of that div altogether in fact).
Demo: http://jsfiddle.net/1qda1jpx/2/
table {
border: 1px solid blue;
}
td {
border: 1px solid lightgray;
}
input {
width: 100%;
}
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</td>
</tr>
</table>
You need to set width: 100% for that input element. Otherwise it wont happen.
I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.
I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.
Here is a jsfiddle of the code.
How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.
You just need to tell the browser to ignore the floating set by the the div surrounding the table:
#divButtons{
clear:both;
}
#divButtons input[type="submit"]{
float:right;
}
Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.
Or something like this
#divButtons{ width:100%; float:left }
http://jsfiddle.net/9BBKp/
Here is demo
try this:
<form>
<div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>
<select name="cmbProducts" onchange="javascript:setTimeout('__doPostBack(\'cmbProducts\',\'\')', 0)" id="cmbProducts" style="width:250px;"></select>
</div>
<div style="padding-top: 50px;">
<hr />
<div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
</td>
</tr>
</table>
</div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
</td>
</tr>
</table>
</div>
</div>
<hr />
</div>
<div id="divButtons" style="text-align: center;">
<input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
<input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
</div>
</form>
and css:
.list-box {
width: 250px;
}
.selection-panel {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
align-content: center;
text-align: center;
}
#divButtons {
float:right;
clear:both;
}
I have a form which is presented in a table. In the third column, there are 4 rows for selecting the preferred method of contact (radio buttons). I'm currently using a label to write this text in the first row. I'm told, however, it doesn't look as nice as using a custom image.
The image is supposed to sit nicely amongst the form content with an arrow pointing to these radio buttons. I figured the easiest way to do this would be to set a fixed width on the columns then set the table's background image to the image I've been given and position it (with background-position) to where it should sit. With the column widths set, there shouldn't be a problem of alignment.
Any other ideas on how to do this?
My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
background-color:#EBF3F7;
width:681px;
}
table.contactForm td
{
text-align:left;
padding-top:5px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
white-space:nowrap;
height:25px;
}
table.contactForm td.first
{
width:200px;
}
table.contactForm label
{
padding-left:5px;
}
table.contactForm td.second
{
width:200px;
text-align:right;
}
table.contactForm td input[type=text]
{
width:180px;
}
table.contactForm td.third
{
width:20px;
text-align:right;
}
table.contactForm td.imageArrows
{
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:left center;
width:261px;
height:78px;
padding:0px;
}
</style>
</head>
<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
</table>
</body>
</html>