We help IT Professionals succeed at work.

unhiding causes misaligned columns

ecpeel
ecpeel asked
on
Hi,
The function is triggered when something changes in the email input box.
Why does the new row throw off the the form alignment?

<table width="100%" border="0">
		<tr><td colspan="2">&nbsp;</td></tr>
		<tr>
			<td>&nbsp;</td>
			<td><span style="color:##A00;">*</span> Denotes a required field</td>
		</tr>
		<tr>
			<td align="right"><b>Business Name:</b>&nbsp;</td><td width="77%"></td>
		</tr>
		<tr>
			<td align="right"><b>Account Number:</b>&nbsp;</td><td></td>
		</tr>
		<tr>
			<td align="right"><b><span style="color:##A00;">*</span>Business Phone:</b>&nbsp;</td>
			<td>
				<input type="text" name="txtBusPhone" id="txtBusPhone" value="" onkeyup="disableTabs();" onchange="disableTabs()">
			</td>
		</tr>
		<tr>
			<td align="right"><b>Fax:</b>&nbsp;</td>
			<td>
				<input type="text" name="txtFax" id="txtFax" value="" onkeyup="disableTabs();" onchange="disableTabs();">
			</td>
		</tr>
		<tr>
			<td align="right" valign="middle"><b><span style="color:##A00;">*</span>E-mail:</b>&nbsp;</td>
			<td>
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td valign="top">
							<input type="text" name="txtEmail" id="txtEmail" value="" size="40" validate="regular_expression" pattern="^([_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.(([A-Za-z]{2,3})|(aero|coop|info|museum|name)))?$" message="Email is not valid." onFocus="setWhite(this.id)" onkeyup="" onchange="showConfirm();">			
						</td>
						<td>&nbsp;</td>
						<td valign="top" width="48%" style="font-size:9px;font-weight:bold">Your email is very important to your<br>order. Please confirm its accuracy.</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr id="rowConfirmEmaila" style="visibility:hidden;display:none;">
			<td align="right" valign="middle"><b><span style="color:##A00;">*</span>Confirm E-mail:</b>&nbsp;</td>
			<td>
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td valign="top">
							<input type="text" name="txtEmail" id="txtEmail" value="" size="40" validate="regular_expression" pattern="^([_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.(([A-Za-z]{2,3})|(aero|coop|info|museum|name)))?$" message="Email is not valid." onFocus="setWhite(this.id)" onkeyup="disableTabs();" onchange="disableTabs()">			
						</td>
						<td>&nbsp;</td>
						<td valign="top" width="48%" style="font-size:9px;font-weight:bold"></td>
					</tr>
				</table>
			</td>
		</tr>		
		
		<tr>
			<td align="right"><b>Customer Notes:</b>&nbsp;</td>
			<td>
				<textarea id="txtNotes" name="txtNotes" style="width:300px;" onkeyup="disableTabs();" onchange="disableTabs();"></textarea>
			</td>
		</tr>
	</table>
    
    <script type="text/javascript">

	
	function showConfirm()
	{
		document.getElementById('rowConfirmEmaila').style.visibility = "visible";
			
		document.getElementById('rowConfirmEmaila').style.display = "block";
		
	}
	
</script>

Open in new window

Comment
Watch Question

its the display block that is doing it.
try this instead.
function showConfirm()
      {
            document.getElementById('rowConfirmEmaila').style.visibility = "visible";
                  
            document.getElementById('rowConfirmEmaila').style.display = "";
            
      }
Albert Van HalenAnalyst developer
CERTIFIED EXPERT
Commented:
Loose the inline style visibility: hidden and keep display: none.
Set the style.display to "" (empty string) in showConfirm and it should be OK.
Don't use visibility.

Author

Commented:
Thanks!
and thanks for the extra tip AlbertVanHalen

Explore More ContentExplore courses, solutions, and other research materials related to this topic.