Apex Code Development You need to sign in to do that
Don't have an account?
Michael3.Brown HTML Forms Not Stacking on Top of Each Other
Hello. I have a VisualForce page in which I create a bar graph. I have 5 forms I stack on top of each other, with each form respresenting a different probability associated with my records: Low, Med, High, DNR, or Done. Each form is a one-cell table I highlight in a different color. As long as each probability is accounted for, all my forms stack on top of each other correctly.
For example:
[LOW]
[MED]
[HIGH]
[DNR]
[DONE]
However, if one of my form has no records associated with its probability, I use JavaScript to hide that form. However, instead of having the next form slide down, **bleep** remains in place, as if the hidden form is still there. For example, if I remove the "Done" probability form, I see something like:
[LOW]
[MED]
[HIGH]
[DNR]
* whitespace *
Instead of sliding down to the bottom, the "DNR" probability form stays where it is. I'm not sure why this occurs, as the rest of the forms seem to stack on each other correctly.
Here is my code:
<SCRIPT language="javascript" type="text/javascript">
function hideForms()
{
if ({!graphDoneQ3} == '0')
{
document.bargraphDone.style.display = "none";
}
if ({!graphLowQ3} == '0')
{
document.bargraphLow.style.display = "none";
}
if ({!graphMedQ3} == '0')
{
document.bargraphMed.style.display = "none";
}
if ({!graphHighQ3} == '0')
{
document.bargraphHigh.style.display = "none";
}
if ({!graphDNRQ3} == '0')
{
document.bargraphDNR.style.display = "none";
}
}
<TD valign="bottom" height="500">
<FORM name="bargraphLow">
<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="0" height="{!graphLowQ3}">
<TR><TD bgcolor="red" width="30"></TD></TR></TABLE></FORM>
<FORM name="bargraphMed">
<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="0" height="{!graphMedQ3}">
<TR><TD bgcolor="yellow" width="30"></TD></TR></TABLE></FORM>
<FORM name="bargraphHigh">
<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="0" height="{!graphHighQ3}">
<TR><TD bgcolor="green" width="30"></TD></TR></TABLE></FORM>
<FORM name="bargraphDNR">
<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="0" height="{!graphDNRQ3}">
<TR><TD bgcolor="gray" width="30"></TD></TR></TABLE></FORM>
<FORM name="bargraphDone">
<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="0" height="{!graphDoneQ3}">
<TR><TD bgcolor="#000000" width="30"></TD></TR></TABLE></FORM></TD>
If anyone could provide insight into why this stacking error might be happening, I would greatly appreciate it.
Thanks!
Mike
I've seen this before with table cells due to the indentation - while you are hiding the form, there's some whitespace to the left of it which some browsers will decide they have to render, as though the spaces were nonbreaking spaces ( ).
The way around it for me was to compress everything onto a single line and use <br/> to separate the lines - it will make your page markup less readable though, and I wasn't using forms so there may be other wrinkles with those.
All Answers
I've seen this before with table cells due to the indentation - while you are hiding the form, there's some whitespace to the left of it which some browsers will decide they have to render, as though the spaces were nonbreaking spaces ( ).
The way around it for me was to compress everything onto a single line and use <br/> to separate the lines - it will make your page markup less readable though, and I wasn't using forms so there may be other wrinkles with those.
Thanks Bob, I will play around with this.