I was maintaining a very old web project and found issues with the alignment. It seems to be very simple HTML or CSS issues, but I couldn't figure it out.
The app generates two tables in the code behind(populates the contents of the second table) and stacks them up like this:
<table border="1">
<tr>
<td width="70%" align="center">Description</td>
<td width='75px'>Header1</td>
<td width='75px'>Header2</td>
<td width='75px'>Header3</td>
</tr>
</table>
<table border="1">
<tr>
<td width='70%'>
<input type="text" name="first_name" value="Software" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2000" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="1" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2" style="width:100%" />
</td>
</tr>
</table>
The first table serves as the header while the second table contains the detail rows.So each header should align properly with its content. But when I resize the window, the alignment is messed up.
I just wondering why it happens as the tables follow the same structure. The only difference is the second table uses some input elements instead of plain text.
That's how tables work. The content of the first table is too big to shrink the table cells as much as the 2nd table. A quick check is to change the text in the first table, see this fiddle for instance: https://jsfiddle.net/q4zzvcra/
Also, td width="75px" needs to be td width="75" ditch the px
In html 5 width is not supported anymore for td, use css instead, see this post: HTML 'td' width and height
I tried this out at https://jsfiddle.net/9p37p2en/.
The only difference is the second table uses some input elements instead of plain text.
And that's exactly your problem. The text nodes will never shrink beyond the minimum width of the longest word, so unless you get rid of the overflow in your table, your table cell won't shrink smaller than that. An text INPUT field however can shrink until just a few px.
Also:
Absolute widths in table cells are ignored if in that same table there are cells with relative width. You can safely remove the width=75px, it doesn't do anything at all.
You should not use td's width and align properties. Use its style or class property instead together with the correct CSS.
Related
I have this issue. I have written this HTML code, but I am unable to align between the question, yes/no buttons and text area box. My question has huge space from yes/no buttons, but when I drag the text area box and making it smaller, the question and yes/no buttons come closer as I wanted it to look. How can I fix this issue so my question is next to the yes/no buttons and box is underneath and doesn't move when I drag to make it bigger or smaller?
<table cellspacing="2" cellpadding="2">
<tr>
<td class="data_yy">
<input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label>
<input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
</td>
<td class="data_xx"> Are are taking English class in fall?</td>
</tr>
<tr>
<td>
<textarea cols="120" rows="5" maxLenghth="20" class="resizable" name="jack" id="jack"> </textarea>
<div class="plaintext" style="justify:left" id="jack"> </div>
</td>
</tr>
</table>
So, this is a table, and you have two cells in the first row, and only one cell in the second row. You'll want that second cell to have colspan="2" as a property...
<td colspan="2">
And then, for the second part of your issue ("so my question [text] is next to the yes/no buttons"), you'll want to change the first yes/no cell to have <nobr> so it doesn't linebreak, and also set width="1"...
<td class="data_yy" width="1">
Made a quick working demo.
Does this look right?
I am trying to put a status image (showing a tick if email is correct or cross if not) next to the email field in my form.
The problem is my registration form is using the table method , so the image is not showing next to the field but below it. Can anyone help me out here?
This is what I tried to do but still not work the way I want it to.
<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
The issue is because the <td> has not enough space to fit in both text field and the image.
either add more width to the <table> or the 2nd <td> will solve the problem.
Since your image is of a check mark and an x, just use the unicode equivalents:
✔ = ✔
✘ = ✘
And simply get rid of the image altogether.
All it needs right now is space to fit in.
<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
Take a look at this fiddle, what changed is the size of the table containing the column. You may either reduce the input width or let it more space by increasing the table width.
I've got a form inside a table that has some Javascript validation. The table tag is
<table style="padding-left:70px" align="left" cellpadding="10">
and a given row looks like this:
<tr id="email_row">
<td align="right" valign="top">
<label for="email">Email: *</label>
</td>
<td class="field_cell" valign="top">
<input type="text" name="email" maxlength="80" size="30"><span class="error_field"></span>
</td>
</tr>
If the user hits submit without this or other fields filled (or filled correctly), the span gets filled with an error message like "Invalid" or "Required." Unfortunately, doing this shifts the whole tbody over do the left (even though it is aligned left). Any suggestions?
FYI, I can only reproduce this problem in Chrome. Firefox and IE are working just fine.
Fixed!
The problem was that I had a row of text in the table with colspan=2 that made the width of the table greater than the width of any of the other rows.
Adding text to the <span> elements increased the width of the second column, which in turn caused the first column to become smaller (since its cells were aligned to the right).
I have a very simple form for data input. Just labels with inputs. But my labels are localized, so I don't know how long text for different languages will be. This problem is easily solved with table layout:
<table>
<tr>
<td>
<label for="Text1">Short</label>
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
<label for="Text1">Looooooooong</label>
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
</table>
No matter how long labels are my layout will be always nice. But us many say using table tag with non tabular data is not good. I don't now how to solve this problem with divs.
<div>
<div style="float:left; width:50px;"><label for="Text3">Short</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:50px;"><label for="Text4">Looooooooong</label></div>
<div style="float:left;"><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
With this solution I need to use fixed size divs. Of cource I can set some big value for label divs width, but I want that my UI takes as much space as needed.
Any ideas?
The only way to really get a nice, adjustable layout similar to the one you get with an HTML table (which is semantically correct here, should someone care about this) is to use table layout in CSS, i.e. to use display: table, display: table-row, etc. It’s probably obvious how to do that. But it will have more limited browser support than an HTML table.
Any other approach has some rigidity where a guess on the widths of labels or the entire... construct has to be made.
This is what I came up with.
It's cleaner than yours, both the tabular and div approach.
The point of a so called "div layout" is to not have the not-semantic table stuck on your site like a pain in the neck. That doesn't necessarily means you need divs! A simple form and labels can do just fine.
The Code
HTML
<form>
<label>Short<input></label>
<label>Loooooooooooooooong<input></label>
</form>
CSS
form {
width: 50%;
}
label {
display: block;
}
label input {
float: right;
}
I've set the form to 50% so that you can easily resize the view port and see what happens when the width is not sufficient. This way, the input will be pushed down, but hte label won't be broken.
It's usually good to follow this rule of thumb: If a div only has one child nested inside of it, you can usually skip it. This rule works for simple designs like this (there are cases where extra divs are needed for complex design issues)
Although I am not completely clear as to what your layout needs are, I like to right-justify labels for readability:
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text3" >Short:</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text4">Looooooooong:</label></div>
<div style="float:left; "><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
I don't know if this helps you, but after AVOIDING tables like the plague for the past 5 years I am coming to realize there are a lot of old school instances that work really well with tables. The past 2 of 5 form solutions have been inside tables. Like you said, it's "nice" and neat without a lot of extra code work.
If the table works, use it.
I have an input form with a column on the left that contains the label for the input, and a column on the right with the input element. Right now it's a table (sorry):
<tr>
<td>Header</td>
<td><input /></td>
</tr>
I have a couple of inputs that I'd like to take following form:
<tr>
<td>Header (Extra)</td>
<td><input /> (<input />)</td>
</tr>
In the first case, input should expand to fill the whole column. In the second, I'd like the 2 inputs to expand as wide as they can to be the same size, and fill the column.
Ideally, my display would look like
Row 1 _______________________
Row 2 (Extra) __________ (__________)
Is it possible? Thoughts on converting this to more semantic html would also be entertained. Also note that I'd like all of the "Row 2" line to be on 1 line when possible, it should work with a flexible table width.
I wouldn't use CSS for this, I'd just add a second <td> element, but you'd have to use some additional CSS for widths, etc.
<tr>
<td>Header</td>
<td colspan="2"><input style="width: 99.6%" /></td>
</tr>
<tr>
<td>Header (Extra)</td>
<td><input style="width: 99.3%" /></td>
<td>(<input style="width: 99.3%" />)</td>
</tr>
I used the 99.3% for the width because input elements are slightly different and 100% causes it to overflow past the boundaries. I've found 99.3% to work for the best majority of cases in my experience.
Full JSFiddle Example
I could not find a way to get this to format correctly without putting the parentheses in their own cells.
<table>
<tr>
<td>Header</td>
<td colspan="4"><input /></td>
</tr>
<tr>
<th>Target (Actual)</th>
<td><input /></td>
<td> (</td>
<td><input /></td>
<td>)</td>
</tr>
</table>
table {
width:27em;
}
table input {
width:99%;
}
When I set the table width to something like 95%, everything resizes nicely with the browser. A bit of padding on cells keeps the parentheses and inputs from overlapping.