Closed
Bug 331029
Opened 20 years ago
Closed 20 years ago
Misplaced form controls in a table after I want to reveal them with javascript
Categories
(Core :: Layout: Tables, defect)
Core
Layout: Tables
Tracking
()
RESOLVED
INVALID
People
(Reporter: d.pontari, Unassigned)
Details
(Keywords: testcase)
Attachments
(2 files)
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; {A918238B-03CD-4FE6-A171-C5A93E74E375}; (R1 1.3))
Build Identifier:
I found something similar in bug 140697, but this happens always when I want to reveal a form control changing CSS style.
Here there is an example (it works well in IE):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr">
<head>
<title>Try form</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function showhide (id, set) {
divobj = document.getElementById(id);
if (set == true) {
divobj.style.display = 'block';
} else {
divobj.style.display = 'none';
}
}
</script>
</head>
<body class="user course-1" id="user-edit">
<form method="post" id="form" enctype="multipart/form-data" action="edit.php">
<div id="page">
<table summary="user data form" class="formtable">
<tr id="firstname_row">
<th>Nome</th>
<td>
<input type="text" id="firstname" size="30" alt="firstname" maxlength="20" value="" />
</td>
</tr><tr id="lastname_row">
<th>Cognome</th>
<td>
<input type="text" id="lastname" size="30" alt="lastname" maxlength="20" value="" />
</td>
</tr><tr id="email_row">
<th>Indirizzo email</th>
<td>
<input type="text" id="email" size="30" alt="email" maxlength="100" onfocus="showhide ('email_1_row', true)" value="" />
</td>
</tr><tr id="email_1_row">
<th>Indirizzo email 2</th>
<td>
<input type="text" id="email_1" size="30" alt="email_1" maxlength="100" onfocus="showhide ('email_2_row', true)" value="" />
</td>
</tr><tr id="email_2_row">
<th>Indirizzo email 3</th>
<td>
<input type="text" id="email_2" size="30" alt="email_2" maxlength="100" onfocus="showhide ('email_3_row', true)" value="" />
</td>
</tr><tr id="email_3_row">
<th>Indirizzo email 4</th>
<td>
<input type="text" id="email_3" size="30" alt="email_3" maxlength="100" onfocus="showhide ('email_4_row', true)" value="" />
</td>
</tr><tr id="email_4_row">
<th>Indirizzo email 5</th>
<td>
<input type="text" id="email_4" size="30" alt="email_4" maxlength="100" onfocus="showhide ('email_5_row', true)" value="" />
</td>
</tr><tr id="email_5_row">
<th>Indirizzo email 6</th>
<td>
<input type="text" id="email_5" size="30" alt="email_5" maxlength="100" value="" />
</td>
</tr><tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="Aggiornamento profilo" /></td>
</tr>
</table>
<input type="hidden" name="course" value="1" />
<input type="hidden" name="id" value="4" />
</div>
</form>
<script type="text/javascript">
showhide ('email_1_row', false);
showhide ('email_2_row', false);
showhide ('email_3_row', false);
showhide ('email_4_row', false);
showhide ('email_5_row', false);
</script>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
1. copy the code I submitted in a file and try it
Actual Results:
the row (<tr>) I reveal seems to be included in the first <td> tag
Expected Results:
each row must be in column
|
||
Comment 1•20 years ago
|
||
1. load file
2. click into 3rd input ('Indirizzo email')
|
||
Comment 2•20 years ago
|
||
|
|
||
Comment 3•20 years ago
|
||
I think this bug is invalid, you have style="display:block" on the table-row, so Mozilla is generating two anonymous table-cells and table-row around that.
I think that's all according to what css2.1 says, afaics.
Assignee: general → nobody
Component: General → Layout: Tables
Keywords: testcase
Product: Mozilla Application Suite → Core
QA Contact: general → layout.tables
Version: unspecified → Trunk
|
|
||
Comment 4•20 years ago
|
||
Or this bug is a duplicate of another (invalid) bug, which is very likely.
|
Reporter | |
Comment 5•20 years ago
|
||
<tr> I tried with inline option... it's worse.
|
|
||
Comment 6•20 years ago
|
||
Just use display = 'table-row'.
toggle between display:none
and display:'' that works crossbrowser. see https://bugzilla.mozilla.org/show_bug.cgi?id=97506#c50
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 8•20 years ago
|
||
Thanks! The solution was 'table-row' property. (instead of Bernd's suggestion seems to me unapplicable with javascript).
You need to log in
before you can comment on or make changes to this bug.
Description
•