<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: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 column elements horizontally.

Oncord rows are based on a system of 12 columns, and can be used to create a variety of layouts. The width of each column is determined by the number of units it spans.

A row of three equal width columns would be created by adding three columns with a width attribute of 4. The sum of column widths in a given row should always add to 12 to maintain a consistent layout.

Rows in Oncord are responsive, and will automatically stack columns on mobile.

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>