User Guide Cancel

cflayout

Last updated on May 30, 2024 | Also applies to ColdFusion

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Description

Creates a region of its container (such as the browser window or a cflayoutarea tag) with a specific layout behavior: a bordered area, a horizontal or vertically arranged box, or a tabbed navigator.

Syntax

<cflayout 
type="accordion|border|hbox|tab|vbox" 
activeOnTop="false|true" 
align="center|justify|left|right" 
fillHeight="true|false" 
fitToWindow="true|false" 
height="integer" 
name="string" 
padding="integer" 
style="CSS style specification" 
tabHeight="measurement" 
tabPosition="top|bottom" 
tabStrip="true|false" 
titleCollapse="true|false" 
width="integer"> 

cflayoutarea tags 

</cflayout>

Note:

You can specify this tag's attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute name as structure key.

History

ColdFusion 9:

Added accordion value of the type attribute and the activeOnTop, fillHeight, and titleCollapse attributes.
The attributes, height and width are supported for the types hbox and vbox.
ColdFusion 8: Added this tag.

Attributes

Attribute	Req/Opt	Default	Applies to	Description
type	Required		all	The type of layout. The following values are valid: accordion: a container with multiple layout areas that display no more than one area at a time. Each layout area has a title bar that is always displayed. The user can expand or collapse each layout area by clicking + or - button on the layout area title bar border: a box with a border and up to five layout areas, each with a border. For more information, see Usage. hbox: a horizontal box where all immediate child cflayoutarea controls are arranged horizontally. tab: a tabbed display where the current child cflayoutarea tag occupies the display area of the layout, and each layout area has a tab that the user can select to display its contents. vbox: a vertical box where all immediate child cflayoutarea controls are arranged vertically.
activeOnTop	Optional	false	accordion	Specifies whether the active panel moves to the top of the layout, becoming the first panel.
align	Optional	Determined by browser layout direction	all	Specifies the default alignment of the content of child layout areas. Each cflayoutarea tag can specify an alignment attribute to override this value. The following values are valid: center justify left right
fillHeight	Optional	true	accordion	A Boolean value that specifies whether to adjust the active layout area's height to fill the available space in the layout control container: true false If you specify fillHeight as false, then ColdFusion sets overflow to hidden.
fitToWindow	Optional	false	border	A Boolean value that specifies whether the border layout must occupy 100% of the width and height of the window: true false The underlying implementation uses a viewport, hence, any content outside the layout is not accommodated in the layout. When using nested border layouts, if you specify fitToWindow as true, the layouts nested within the border layout may not automatically fit into the available space. Hence, for nested layouts, it is recommended to use width or size instead of fitToWindow.
height	Optional	600 for border layout; autoheight for others	all	Height of the layout in pixels. For the tab layout, the height attribute has the same functionality as the tabheight attribute. If you specify both height and tabheight attributes, height takes priority over tabheight. The height value specified here takes priority over the height value specified using the style attribute.
name	Optional		all	The name of the layout region. Should be unique on a page.
padding	Optional	0	hbox, vbox	For hbox layouts, specifies the padding on the right side of each child layout area. For vbox layouts, specifies the padding at the bottom of each child layout area. You can use any valid CSS length or percent format, such as 10, 10% 10px, or 10em, for this attribute. The padding is included in the child layout area and takes the style of the layout area.
style	Optional		all	A CSS style specification that defines layout styles.
tabHeight	Optional		tab	Specifies the height of the content area of all child layout areas. You can override this setting by specifying a height setting in a individual cflayoutarea tag style attributes.
tabPosition	Optional	top	tab	Specifies the location of the tabs relative to the tab region contents. bottom: the tabs appear at the bottom of the layout. top: the tabs appear at the top of the layout.
tabStrip	Optional	true	tab	If true, a background tab strip is displayed.
titleCollapse	Optional	true	accordion	Specifies whether clicking anywhere on each layout area's title bar expands and collapses the layout area. If false, the user must click the title bar +/- button to expand or collapse a layout area.
width	Optional		all	Width of the layout in pixels. This value takes priority over the width defined using the style attribute. If no value is specified, autoWidth is applied and therefore, content fills the entire screen.

Usage

The border type layout has the following characteristics:

The layout control and each of its immediate layout area children is surrounded by a border.
The control can have up to five children positioned at the left, right, center, top, and bottom of the layout.
You can configure the child layout areas, except for the center area, to have splitters so that users can expand and collapse them or close them completely.
The center child layout area occupies all available space in the layout that is not used by any of the other layout areas.
To specify layout height, use the height setting of the styleattribute.

Note:

If you specify a border layout on a page that has a DOCTYPE declaration, the layout cannot properly determine its height and you must specify the height in a cflayout tag style attribute.

You can use the following JavaScript functions to access the underlying Ext JS - JavaScript Library objects for border and tab type cflayout controls.

Function	Description
ColdFusion.Layout.getBorderLayout	Gets the underlying Ext JS - JavaScript Library object for the specified border type cflayout control.
ColdFusion.Layout.getTabLayout	Gets the underlying Ext JS - JavaScript Library object for the specified tab type cflayout control.
ColdFusion.Layout.getAccordionLayout	Gets the underlying Ext JS - JavaScript Library object for the specified accordion type cflayout control.

Note:

Client side charts do not work with dynamic binding in cflayout.

For more information on configuring layout areas, see cflayoutarea.

Example

The following example shows a set of nested layouts. The outer layout is a vbox, with two layout areas. The top layout area has a border layout, the bottom layout area contains a form with buttons to control the display of the border layout areas.

<html> 
<head> 
</head> 
<body> 
<cflayout name="outerlayout" type="vbox"> 
<cflayoutarea style="height:400;"> 
<cflayout name="thelayout" type="border"> 
<!--- The 100% height style ensures that the background color fills 
the area. ---> 
<cflayoutarea position="top" size="100" splitter="true" 
style="background-color:##00FFFF; height:100%"> 
This is text in layout area 1: top 
</cflayoutarea> 
<cflayoutarea title="Left layout area" position="left" 
closable="true" 
collapsible="true" name="left" splitter="true" 
style="background-color:##FF00FF; height:100%"> 
This is text in layout area 2: left<br /> 
You can close and collapse this area. 
</cflayoutarea> 
<cflayoutarea position="center" 
style="background-color:##FFFF00; height:100%"> 
This is text in layout area 3: center<br /> 
</cflayoutarea> 
<cflayoutarea position="right" collapsible="true" 
title="Right Layout Area" initcollapsed="true" 
style="background-color:##FF00FF; height:100%" > 
This is text in layout area 4: right<br /> 
You can collapse this, but not close it.<br /> 
It is initially collapsed. 
</cflayoutarea> 
<cflayoutarea position="bottom" size="100" splitter="true" 
style="background-color:##00FFFF; height:100%"> 
This is text in layout area 5: bottom 
</cflayoutarea> 
</cflayout> 
</cflayoutarea> 

<cflayoutarea style="height:100; ; background-color:##FFCCFF"> 
<h3>Change the state of Area 2</h3> 
<cfform> 
<cfinput name="expand2" width="100" value="Expand Area 2" type="button" 
onClick="ColdFusion.Layout.expandArea('thelayout', 'left');"> 
<cfinput name="collapse2" width="100" value="Collapse Area 2" type="button" 
onClick="ColdFusion.Layout.collapseArea('thelayout', 'left');"> 
<cfinput name="show2" width="100" value="Show Area 2" type="button" 
onClick="ColdFusion.Layout.showArea('thelayout', 'left');"> 
<cfinput name="hide2" width="100" value="Hide Area 2" type="button" 
onClick="ColdFusion.Layout.hideArea('thelayout', 'left');"> 
</cfform> 
</cflayoutarea> 
</cflayout> 
</body> 
</html>

Get help faster and easier

New user?

cflayout

Description

Category

Syntax

See also

History

Attributes

Usage

Example

Get help faster and easier

Ask the Community

Contact Us