flash form: how to align form controls in table manner

[jshaffner]

Lets say that we have three columns and two rows and each cell have an input. I
can align the inputs vertically using html table. How do I do it the same with
rich form? I tried different ideas including tile approach below but to no
luck. Any idea?



<cfformgroup type="tile">
<cfinput type="text" name="firstName" label="First Name" width="100" />
<cfinput type="text" name="middleName" label="Middle Name" width="100" />
<cfinput type="text" name="lastName" label="Last Name" width="100" />
</cfformgroup>
<cfformgroup type="tile">
<cfinput type="text" name="email" label="Email Address" width="120" />
<cfinput type="text" name="phone" label="Phone" width="120" />
</cfformgroup>

[Mike Nimer]

You want to put the first,middle, and last names vertically and the
email,phone vertically - but put them next to each other. Correct?

try this
<cfform format="flash">
<cfformgroup type="HBox">
<cfformgroup type="VBox">
<cfinput type="text" name="firstName" label="First Name"
width="100" />
<cfinput type="text" name="middleName" label="Middle Name"
width="100" />
<cfinput type="text" name="lastName" label="Last Name"
width="100" />
</cfformgroup>
<cfformgroup type="VBox">
<cfinput type="text" name="email" label="Email Address" width="120" />
<cfinput type="text" name="phone" label="Phone" width="120" />
</cfformgroup>
</cfformgroup>
</cfform>


hth,
---nimer




"jshaffner" <webforumsuser@macromedia.com> wrote in message
news:cv0ffv$dik$1@forums.macromedia.com...

> Lets say that we have three columns and two rows and each cell have an
> input. I
> can align the inputs vertically using html table. How do I do it the same
> with
> rich form? I tried different ideas including tile approach below but to no
> luck. Any idea?
>
>
>
> <cfformgroup type="tile">
> <cfinput type="text" name="firstName" label="First Name" width="100" />
> <cfinput type="text" name="middleName" label="Middle Name" width="100" />
> <cfinput type="text" name="lastName" label="Last Name" width="100" />
> </cfformgroup>
> <cfformgroup type="tile">
> <cfinput type="text" name="email" label="Email Address" width="120" />
> <cfinput type="text" name="phone" label="Phone" width="120" />
> </cfformgroup>
>

[jshaffner]

Thanks, your suggestion of using hbox/vbox helped.

This is where I am now. I need to do two more things.

1) Make the hrules one hrule across the form. If it was html table, I would
use hrule with colspan or css.

2) Make City, State,and Zip appear as if they are in same row (aligned
horizonally). Again, if it was html table, I would take advantage of table
cells and do nothing any further.

<cfform format="flash">
<cfformgroup type="panel" label="Directory">

<cfformgroup type="hbox">

<cfformgroup type="vbox">
<cfinput type="text" name="firstName" label="First Name" />
<cfinput type="text" name="email" label="Email Address" />
<cfformitem type="hrule" />
<cfinput type="text" name="address1" label="Address 1" />
<cfinput type="text" name="address2" label="Address 2" />
<cfinput type="text" name="city" label="City" />
</cfformgroup>

<cfformgroup type="vbox">
<cfinput type="text" name="middleName" label="Middle Name" />
<cfinput type="text" name="phonelabel="Phone" />
<cfformitem type="hrule" />
<cfinput type="text" name="state" label="State" />
</cfformgroup>

<cfformgroup type="vbox">
<cfinput type="text" name="lastName" label="Last Name" />
<cfinput type="text" name="fax" label="Fax" />
<cfformitem type="hrule" />
<cfinput type="text" name="zip" label="Zip" />
</cfformgroup>

</cfformgroup>
</cfformgroup>
</cfform>

[Mike Nimer]

Something like this?

<cfform format="flash">
<cfformgroup type="panel" label="Directory">

<cfformgroup type="hbox">
<cfformgroup type="vbox">
<cfinput type="text" name="firstName" label="First Name" />
<cfinput type="text" name="email" label="Email Address" />
</cfformgroup>
<cfformgroup type="vbox">
<cfinput type="text" name="middleName" label="Middle Name" />
<cfinput type="text" name="phone" label="Phone" />
</cfformgroup>
<cfformgroup type="vbox">
<cfinput type="text" name="lastName" label="Last Name" />
<cfinput type="text" name="fax" label="Fax" />
</cfformgroup>

</cfformgroup>

<cfformitem type="hrule" />

<cfformgroup type="vbox">
<cfinput type="text" name="address1" label="Address 1" />
<cfinput type="text" name="address2" label="Address 2" />
<cfformgroup type="HORIZONTAL" label="City,State,Zip">
<cfinput type="text" name="city" label="City" />
<cfinput type="text" name="state" label="State" />
<cfinput type="text" name="zip" label="Zip" />
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>

----nimer
"jshaffner" <webforumsuser@macromedia.com> wrote in message
news:cv56qh$hak$1@forums.macromedia.com...

> Thanks, your suggestion of using hbox/vbox helped.
>
> This is where I am now. I need to do two more things.
>
> 1) Make the hrules one hrule across the form. If it was html table, I
> would
> use hrule with colspan or css.
>
> 2) Make City, State,and Zip appear as if they are in same row (aligned
> horizonally). Again, if it was html table, I would take advantage of table
> cells and do nothing any further.
>
> <cfform format="flash">
> <cfformgroup type="panel" label="Directory">
>
> <cfformgroup type="hbox">
>
> <cfformgroup type="vbox">
> <cfinput type="text" name="firstName" label="First Name" />
> <cfinput type="text" name="email" label="Email Address" />
> <cfformitem type="hrule" />
> <cfinput type="text" name="address1" label="Address 1" />
> <cfinput type="text" name="address2" label="Address 2" />
> <cfinput type="text" name="city" label="City" />
> </cfformgroup>
>
> <cfformgroup type="vbox">
> <cfinput type="text" name="middleName" label="Middle Name" />
> <cfinput type="text" name="phonelabel="Phone" />
> <cfformitem type="hrule" />
> <cfinput type="text" name="state" label="State" />
> </cfformgroup>
>
> <cfformgroup type="vbox">
> <cfinput type="text" name="lastName" label="Last Name" />
> <cfinput type="text" name="fax" label="Fax" />
> <cfformitem type="hrule" />
> <cfinput type="text" name="zip" label="Zip" />
> </cfformgroup>
>
> </cfformgroup>
> </cfformgroup>
> </cfform>
>