The visible attribute and the gap left in Flash formsFirst of thanks to Kelly Keith to actually putting me onto this solution after my post to CF-Talk about removing the gap left in <cfform format="flash"> when you set an item like <cfformgroup type="page"> visibilites to hidden. To quote Kelly direct the short answer is "When visible is set to false set the height to a negative number."Below I've got three examples of problem, the solution and an event driven solution. 1. This first exaple is a example of the visible gap left by setting visible to false<cfform format="flash" action="#cgi.script_name#" name="form1"> <cfformitem type="text">Form 1</cfformitem> <cfformgroup type="panel" label="top panel" visible="false"> <cfformitem type="html">Panel 1</cfformitem> </cfformgroup> <cfformgroup type="panel" label="bottom panel"> <cfformitem type="html"> You'll notice the gap above this "panel" left by the first hidden panel </cfformitem> </cfformgroup></cfform>2. Below I have put in place Kelly's suggestion which resolves the whitespace<cfform format="flash" action="#cgi.script_name#" name="form2"> <cfformitem type="text">Form 2</cfformitem> <cfformgroup type="panel" label="top panel" visible="false" height="-1"> <cfformitem type="html">Panel 1</cfformitem> </cfformgroup> <cfformgroup type="panel" label="bottom panel"> <cfformitem type="html"> You'll notice the gap is now removed. This is done by setting a negative height e.g.
<cfformgroup type="panel" label="top panel" visible="false" height="-1"> </cfformitem> </cfformgroup></cfform>3. The final bit of code uses some basic Actionscipt to remove on a onClick event to hide/show the panel along with setting the height<cfform format="flash" action="#cgi.script_name#" name="form3"> <cfformitem type="script"> function hidePanel(){ _root.pan1.visible = false; _root.pan1.height = -1; } function showPanel(){ _root.pan1.visible = true; _root.pan1.height = 100; } </cfformitem> <cfformitem type="text">Form 3</cfformitem> <cfformgroup type="panel" label="top panel" id="pan1"> <cfformitem type="html">Panel 1</cfformitem> </cfformgroup> <cfformgroup type="panel" label="bottom panel"> <cfformitem type="html"> Bottom Panel </cfformitem> </cfformgroup> <cfformgroup type="horizontal"> <cfinput type="button" name="hideBtn" id="hideBtn" value="Hide Top Panel" onclick="hidePanel()" /> <cfinput type="button" name="showBtn" id="showBtn" value="Show Top Panel" onclick="showPanel()" /> </cfformgroup></cfform>If you are working with Flash Forms I gotta say check out AsFusion.com. I've been working on a few rather complex forms which has meant even replicating some Ajax functionality via Flash Remoting all of which I've got from there. I'll try and blog about that soon.