Hidden field still takes up space in table

SuaveRick · Sep 29, 2004

Hello there, I have a table row that I want to hide unless there is something to put in there from our database, I'm doing that in Javascript which it not a problem. I am using the style tag with the visibility: hidden option. I also have tried visibility: collapsed (this is supposted to do what I want but it doesn't). Anyone have ideas?

My Code:
<tr bgcolor="red" style="visibility: hidden">
<td width="25%">Tech Tools Message</td>
<td width="100%">
<LABEL id=lblTechTools style="FONT-SIZE: 100%; FONT-FAMILY: Verdana,Arial">[%!ST_TECH_TOOLS%]</LABEL>
</td>
</tr>

LFI · Sep 29, 2004

Replace visibility:hidden with display:none. If you later want to show the invisible information, change to display:inline.

'hope that helps.

--Dave

SuaveRick · Sep 29, 2004

You got it buddy, now I have to go and read and see why I didn't find that before

Thanks very much, have a great day!

Rick

SuaveRick · Oct 1, 2004

That works but I have another problem related. When I try and show the row using javascript I get an error on the HTML line that's calling the javascript problem saying "object required". I checked the spelling and everythine else, see what you guys can find:

Where I call the function:
<input type = "button" value ="show row" onClick="showRow()">

Where I have the row:
<tr bgcolor="red" style="display: none" id=rowTechTools>
<td width="25%">Tech Tools Message</td>
<td width="100%">
<LABEL id=lblTechTools style="FONT-SIZE: 100%; FONT-FAMILY: Verdana,Arial"><a href="

https://techtools.sasknet.sk.ca/kbase/linkto.php?solution=

[%!ST_CA_PRPS%]" target="_blank">test</a></LABEL>
</td>
</tr>

And the Javascript function:
function showRow()
{
document.all.rowTechTools.style.display = "inline"
}

Does it matter that this row is inside a form? That's where the html for the button is as well.

Thanks for any help!

LFI · Oct 1, 2004

I haven't studied JavaScript enough to know what happens when you start referencing non-form elements (e.g., not an INPUT or SELECT or TEXTAREA) in the JavaScript (i.e., whether or not the form name is needed).

However, the line of code you gave works for me:

Code:

<html>
<head>
<script>
function showRow()
{
 document.all.rowTechTools.style.display = "inline"
}
</script>
</head>
<body>
<table>
 <tr bgcolor="red" style="display: none" id=rowTechTools>
      <td width="25%"><font size="-3" face="VERDANA,ARIAL" color="white">Tech 

Tools Message</font></td>
      <td width="100%"><font face="VERDANA,ARIAL" size="-3" color="white">
        <LABEL id=lblTechTools style="FONT-SIZE: 100%; FONT-FAMILY: 

Verdana,Arial"><a 

href="[URL unfurl="true"]https://techtools.sasknet.sk.ca/kbase/linkto.php?s...=[/URL][%!ST_CA_PRPS%]" 

target="_blank">test</a></LABEL></font>
      </td>
    </tr>
</table>
</body>

<input type = "button" value ="show row" onClick="showRow()">

</html>

However, so did it when I replaced the document.all... line with:

document.getElementById("rowTechTools").style.display = "inline";

...in the showRow() function.

'hope that helps.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hidden field still takes up space in table

SuaveRick

Programmer

LFI

Programmer

SuaveRick

Programmer

SuaveRick

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor