javascript - CSS absolute positioning a table within a table -
we have table created our (classic) asp code
it looks when load page... 
when user clicks edit button on right of each record, detail row made visible...
in ie looks (which want): 
unfortunately, in firefox , other browsers such chrome, looks this: 
the code creates server-side asp code below:
'for record editing .write("<tr class='rowsummary2' style=""display:none;"" id=tr_edit" & g_lngrowcount & ">") .write("<td></td>") .write("<td></td>") .write("<td></td>") .write("<td colspan=""2"" class=""filterback"">") '.write("<div style=""position:relative;left:150px; display:none;"" id=div_edit" & g_lngrowcount & ">") .write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">") .write("<tr>") .write("<td class=""summaryheader2"" align=""left"" colspan=""2"">") .write("<b>edit shpp</b>") .write("</td>") .write("</tr>") .write("<tr>") .write("<td align=""left"" width=""50%"">") .write("<table width=""100%"" border=""0"" cellspacing=""2"" cellpadding=""2"">") .write("<tr>") .write("<td width=""20%"" class=""mandatory"">shpp amount due</td>") if not null2bool(adors("ispaid")) .write("<td colspan=""3""><input type='text' class='inputbox' name='txtshppamountdue' " _ & " id=txtshppamountdue" & g_lngrowcount _ & " value=" & formatnumber(adors("shpppayment"), 2,,,false) _ & " style='width:75px' onkeypress='javascript: validkeypresstest(/[0-9,.]$/, event)'" _ & " onblur='javascript: frmshpp.txtshpppayment.value = this.value;'" _ & " ></input>") else .write("<td class=""summarytext"">" & formatnumber(adors("shpppayment"), 2,,,false) & "</td>") end if .write("</tr>") .write("<tr>") .write("<td valign=""top"" width=""20%"" class=""mandatory"">reason</td>") if not null2bool(adors("ispaid")) .write("<td colspan=""3"" class=""summarytext""><textarea " _ & " id=txtcomment" & g_lngrowcount _ & " name=""txtcomment"">" & null2str(adors("notes")) & _ "</textarea></td>") else .write("<td colspan=""3"" class=""summarytext"">" & null2str(adors("notes")) & "</td>") end if .write("</tr>") .write("</table>") .write("</td>") .write("</tr>") .write("<tr>") .write("<td class=""summaryheader2"" align=""right"" colspan=""2"">") if not null2bool(adors("ispaid")) .write "<input title='save' id='btnsave" _ & g_lngrowcount _ & "' type='button' name='btnsave" _ & g_lngrowcount _ & "' value='save' onclick=""javasript:checkandsubmit('updaterow', " _ & adors("period") _ & ")"" class='formbutton' onmouseover='this.classname='formbuttonhover'' onmouseout='this.classname='formbutton'' onfocus='this.classname='formbuttonhover'' onblur='this.classname='formbutton''/> " end if .write "<input title='cancel' id='btncancel" _ & g_lngrowcount _ & "' type='button' name='btncancel" _ & g_lngrowcount _ & "' value='cancel' onclick='javasript:canceledit(" _ & g_lngrowcount & ")' class='formbutton' onmouseover='this.classname='formbuttonhover' ' _onmouseout='this.classname='formbutton'' onfocus='this.classname='formbuttonhover'' onblur='this.classname='formbutton''/>" .write("</td>") .write("</tr>") .write("</table>") .write("</td>") ' filterback .write "</tr>" the part of asp code puts in hiddren tr element containing table is
.write("<tr class='rowsummary2' style=""display:none;"" id=tr_edit" & g_lngrowcount & ">") .write("<td></td>") .write("<td></td>") .write("<td></td>") .write("<td colspan=""2"" class=""filterback"">") '.write("<div style=""position:relative;left:150px; display:none;"" id=div_edit" & g_lngrowcount & ">") .write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">") .write("<tr>") so each record it's creating row hidden id tr_edit3 (for record 3) , onclick event of edit button below javascript runs show/hide details table:
function hideedittable(rownum, ispaid) { var itotrows = document.getelementbyid("txtrowcount").value; (i = 1; <= itotrows; i++) { document.getelementbyid("tr_edit" + i).style.display = 'none'; //document.getelementbyid("div_edit" + i).style.display = 'none'; } document.getelementbyid("tr_edit" + rownum).style.display = 'block'; //document.getelementbyid("div_edit" + rownum).style.display = 'block'; if (ispaid == 0) { frmshpp.txtshpppayment.value = document.getelementbyid("txtshppamountdue" + rownum).value; frmshpp.txtnotes.value = document.getelementbyid("txtcomment" + rownum).value; frmshpp.txtlumpsum.value = false; // default } } so need have "detail" or adjustment table in center in different browsers in ie11 ...
i tried putting div element around table position absolutely using css, no luck (it messed good!)
.write("<td colspan=""2"" class=""filterback"">") '.write("<div style=""position:relative;left:150px; display:none;"" id=div_edit" & g_lngrowcount & ">") .write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">") so how can have inner table show in middle?
thanks philip
if it's row in table can target , center css:
tr { text-align: center; } or try on td
Comments
Post a Comment