さまざまなブラウザーを使用してパネルを非表示/非表示にすると問題が発生するタイムシート アプリケーションを使用しています。スクリーンショットを参照してください。
画像 1: これは、私がやっていることの一般的な開始ページです。ボタンをクリックします。
画像 2: これは予想される出力です。それは私がIE8で得た出力です。
画像 3: これは最新の Chrome の出力です。パネルが一瞬だけ表示され (不適切に、テーブル全体に広がっていないことに注意してください。幅は 1 列のみです)、再び非表示になります。最新の Firefox と IE でも同じ結果が得られます。
これはトグル用の Javascript です。
function toggleVisibility(panel)
{
if (panel.style.display == "none")
{
panel.style.display = "";
}
else
{
panel.style.display = "none";
}
}
これは、トグルを呼び出す aspx.cs です。
TableCell showCell = new TableCell();
HtmlButton showButton = new HtmlButton();
showButton.Attributes.Add("onClick", "toggleVisibility(panel" + timesheet.timesheetId.ToString() + ")");
showCell.Controls.Add(showButton);
TableCell nameCell = new TableCell();
HyperLink nameLink = new HyperLink();
nameLink.NavigateUrl = "./timesheet.aspx?timesheetId=" + timesheet.timesheetId.ToString()+ "&empNum=" + timesheet.employeeId + "&PopUp=" + _approverEmployeeId;
nameLink.Text = employeeName;
nameLink.Target = "_blank";
nameCell.Controls.Add(nameLink);
aspx.cs ファイルのさらに下には、パネルが定義されている場所があります。
TableRow childRow = new TableRow();
TableCell childCell = new TableCell();
childCell.ColumnSpan = headerRow.Cells.Count;
childCell.Controls.Add(childTable);
childRow.Controls.Add(childCell);
childRow.Attributes.Add("Style", "Display: none");
childRow.ID = "panel" + timesheet.timesheetId;
summaryTable.Rows.Add(headerRow);
summaryTable.Rows.Add(childRow);
childRow.Attributes.Add("Style", "Display: none")を削除すると、すべてのブラウザでテーブルが正しく表示されます。トグルに関連付けられたボタンをクリックすると、新しいブラウザーでテーブルが非表示になり、表示されます。
HTML のスニペットを次に示します。ページ全体の HTML はhttp://asalim.net/approval.txtにあります。
<table id="summaryTable" rules="all" bordercolor="Silver" border="1" style="border-color:Silver;border-style:None;height:32px;width:768px;Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 136px">
<tr>
<td>Show Detail</td>
<td>Name</td>
<td>EmployeeNumber</td>
<td>Approved</td>
<td>Reject</td>
</tr>
<tr id="summary94458" style="border-color:Black;border-width:1px;border-style:Solid;">
<td><button onClick="toggleVisibility(panel94458)"></button></td>
<td><a href="./timesheet.aspx?timesheetId=94458&empNum=051006&PopUp=051006" target="_blank">XXXXXXXXXXXXXXXXXXXXXXX</a></td>
<td>051006</td>
<td><input id="allApproved94458" type="checkbox" name="allApproved94458" onclick="approveLines(this, 94458);" /></td>
<td><input type="submit" name="reject94458" value="Reject" onclick="window.open( './reject.aspx?empNum=051006&timesheetId=94458');" language="javascript" id="reject94458" /></td>
</tr>
<tr id="panel94458" style="Display: none">
<td colspan="5"><table id="detailTable94458" bordercolor="Black" border="0" style="border-color:Black;border-width:1px;border-style:Solid;width:100%;">
<tr>
<td>Description</td>
<td>Job</td>
<td>Extra</td>
<td>Cost Code</td>
<td>Reg Hours</td>
<td>OT Hours</td>
<td>Mileage</td>
<td>Approved</td>
</tr>