Open topic with navigation

Container Element

The Container element is one of the primary CommonSpot elements, especially for use in templates. Container Elements can hold one or more “child’’ elements, including other Containers. CommonSpot includes features for scheduling child elements based on a variety of criteria to make it easy to personalize content and dynamically display different elements.

Because the Container element allows for placement of child elements it is often used to provide the structure of a template. For example, you can build a template with two columns by instantiating two different Container elements, one for each column.

With the introduction of CommonSpot 10.0, Containers can be configured as grids, allowing contributors to specify one or more rows, where each row has its own separate layout and classes and can contain one or more elements. For example, row one might use a single column layout with a width of 100%, row two 50%-50%, row three 33%-33%-33%, etc., with a separate set of classes for each row to control styling. This grid row layout functionality makes it easy for designers to create and contributors to build pages designed for responsive multi-device delivery. It is also ideal for use in free-form pages (vs. well-structured layouts based on a template for a consistent look), as contributors can easily select the layout they desire for each row of the grid and then simply drop in the element types they want.

With Containers you get:

• Built-in support for responsive design without the need to master a new framework. The container element includes a grid tab that makes it easier to design for responsive consumption, with layout options that make it easy for contributors to reliably create and change content. See Responsive Design.
• Render handler support, which enables developers to easily build interactive user interfaces for displaying child elements, such as Tab bars, Accordion, Megamenu, and Carousel or custom controls designed for your site. See Choose Layout. The Developer's Guide provides details on writing your own render handlers.
• Scheduling of Elements within the container.You can assign multiple criteria to control when and if elements display for dynamic content rendering and personalization.
• Click-and-drag reordering of Elements within or across containers. See Reorder Elements. See also Grid Layout in the Contributor's Reference.
• Built-in HTML5 formatting options that allow you to choose which HTML5 tags will render for better outline sectioning with support for existing markup and multimedia. See Container Layout Properties.
• Aria Landmark Roles designation to help you improve page readability for screen readers and other assistive devices and achieve better ADA compliance
• The ability to restrict the type and number of child elements within a container, giving template designers better control over content placed on the page and improving site governance.

For these reasons, PaperThin recommends using Containers instead of Tabular or Scheduled Elements for page layouts. Containers provide all the functionality of Scheduled Elements with the added benefit of flexible positioning, grid system support, HTML5 outlining, and ARIA Landmark roles.

Add Container Elements to pages or templates just as you would any other element - simply choose it from the Layout Elements section of the Element Gallery. Developers can programmatically instantiate a Container elements by CFINCLUDE of the template “ct-render-named-element” with the ‘control’ attribute equal to ‘container’.

 

Related Links

Set Visibility

Editing Rendering Criteria

Choose Layout

Container Layout Properties

Edit Outer Row

Edit Grid Row Layout Column

Reordering Elements

Reorder Elements

Confirm Element Change Discard

---

You can download PDF versions of the Content Contributor's, Administrator's, and Elements Reference documents from the support section of paperthin.com (requires login).

The following guides are available from the support site and are in the /docs/directory of your CommonSpot Server:

• Getting Started Guide
• Upgrade Guide
• Release Notes

You can also download these other guides from the support section of paperthin.com (with login):

• Developer's Guide
• Template Developer's Guide
• Shared Database Configuration Guide
• Replication vs Shared Database Guide 

Sites upgrading from versions earlier than release 6.0 should review the following (from the support section of paperthin.com - requires login):

• What's New in CommonSpot 6.0
• CommonSpot 6.0.0 Menu Quick Reference

---

For technical support:

http://www.paperthin.com/support/

Open topic with navigation