<templates:row>

AJAX

ajax:delayedload ajax:event ajax:navigation ajax:region

Data

data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree

Forms

forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker

Layout

layout:divider layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem

Logic

logic:dependency logic:else logic:if logic:include logic:parse logic:variable

Navigation

navigation:breadcrumbs navigation:item navigation:primary navigation:secondary

Personalisation

personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other

Standard

standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video

Templates

templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row

DESCRIPTION

ATTRIBUTES

id

reverseOrderOnMobile

verticalAlignColumns

EXAMPLES

Simple Row

templates:section templates:styles templates:teammember templates:testimonial

Regions

regions:content regions:contentadditional regions:security regions:togglable

Third Party

thirdparty:googlemap thirdparty:googlemapmarker

`<templates:row>` </...>

A layout container which arranges child columns horizontally.

Rows use a 12-column system: each column's width attribute sets how many units it spans, and the widths in a row should sum to 12.
For example, three columns of width 4 give three equal columns.

Rows are responsive and stack columns on mobile.

By default they have no margin and a 1rem gap between columns.

Content

<templates:column>

Row must contain at least 1 column tag.

Attributes

- `id`

string

Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).

- `reverseOrderOnMobile`

bool

Reverse Order on Mobile

When set to true, reorders the columns in the row so that the first column is on the bottom on mobile.

- `verticalAlignColumns`

string

Vertical Align Columns

Used to align columns within the row vertically. Accepts same values as CSS align-items

Examples

Simple Row

Demonstrates a basic three column layout. Note how the sum of column widths is 12.

HTML:

<templates:row> <templates:column width="4">Column One</templates:column> <templates:column width="4">Column Two</templates:column> <templates:column width="4">Column Three</templates:column> </templates:row>