Andy Jarrett: Visible attribute and the gap left in Flash forms

Loading Twitter

Visible attribute and the gap left in Flash forms

The visible attribute and the gap left in Flash forms

First of thanks to Kelly Keith to actually putting me onto this solution after my post to CF-Talk about removing the gap left in when you set an item like 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

view plain print about

1<cfform format="flash" action="#cgi.script_name#" name="form1">
2    <cfformitem type="text">Form 1</cfformitem>
3    <cfformgroup type="panel" label="top panel" visible="false">
4        <cfformitem type="html">Panel 1</cfformitem>
5    </cfformgroup>
6    <cfformgroup type="panel" label="bottom panel">
7        <cfformitem type="html">
8            You'll notice the gap above this "panel" left by the first hidden panel
9        </cfformitem>
10    </cfformgroup>
11
12</cfform>

2. Below I have put in place Kelly's suggestion which resolves the whitespace

view plain print about

1<cfform format="flash" action="#cgi.script_name#" name="form2">
2    <cfformitem type="text">Form 2</cfformitem>
3    <cfformgroup type="panel" label="top panel" visible="false" height="-1">
4        <cfformitem type="html">Panel 1</cfformitem>
5    </cfformgroup>
6    <cfformgroup type="panel" label="bottom panel">
7        <cfformitem type="html">
8            You'll notice the gap is now removed. This is done by setting a negative height e.g.
9            <br><br>
10            <cfformgroup type="panel" label="top panel" visible="false" height="-1">
11        </cfformitem>
12    </cfformgroup>
13</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

view plain print about

1<cfform format="flash" action="#cgi.script_name#" name="form3">
2
3    <cfformitem type="script">
4        function hidePanel(){
5            _root.pan1.visible = false;
6            _root.pan1.height = -1;
7        }
8        function showPanel(){
9            _root.pan1.visible = true;
10            _root.pan1.height = 100;
11        }
12
13    </cfformitem>
14
15    <cfformitem type="text">Form 3</cfformitem>
16    <cfformgroup type="panel" label="top panel" id="pan1">
17        <cfformitem type="html">Panel 1</cfformitem>
18    </cfformgroup>
19    <cfformgroup type="panel" label="bottom panel">
20        <cfformitem type="html">
21            Bottom Panel
22        </cfformitem>
23    </cfformgroup>
24
25    <cfformgroup type="horizontal">
26        <cfinput type="button" name="hideBtn" id="hideBtn" value="Hide Top Panel" onclick="hidePanel()" />
27        <cfinput type="button" name="showBtn" id="showBtn" value="Show Top Panel" onclick="showPanel()" />
28    </cfformgroup>
29</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.

Comments (2) | Print | Send | 4533 Views

If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck.

(Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

Posted By Justin McNeal @ 3/19/10 12:40 AM

I just wanted to tell you "BLESS YOU!!!" This has had me puzzled for days!!!!!!!! This solution really works well, but can you tell me how I could make this more universal so that I could hide multiple panels with one method call. I am really rusty with CF and as of right now I plan to have a Show/Hide method for each Panel in my form. I know that isn't the best way to do it, but I think I will have to do that for now.

Posted By Justin @ 3/19/10 12:40 AM

[Add Comment]