Tabs with Layouts and Containers

General Principles

The important point to always bear in mind when working with tabs and layouts or containers is that DOM elements form a tree and cannot be interlaced. 

In Concrete CMS layouts are implemented as a special type of block that creates and wraps a psudo-area for each column of the layout. You can't spread a block or stack across areas, so similarly you can't spread a tab across layouts. 

  • You can have a tab set within a layout column - because a layout column is an area.
  • You can have a complete layout within a single tab - because a layout is wrapped in the special layout block type. The important consideration is that the Magic Tabs blocks must be outside the layout, so the layout is wholly contained.

What is fundamentally impossible is to start a tab in one column of a layout and end it in another. Or to start a layout in one tab and end it in another. To do so would break a fundamental rule of the DOM by interlacing elements.

Layout within a tab

The example here is a set of 4 tabs. The first, third  and last tab each contain regular content blocks. The second tab - this tab - contains a layout of 2 columns, and each column in the layout contains a further content block.

General Principles

Content about general principles

Layout within a tab

Content is a layout of 2 columns

- Column 1 content - this column

- Column 2 content - Gotchas

Layout based tab addons

Content about layout based tab addons

Gotchas

The main difficulty arises from the way Concrete CMS creates and adds layouts. Layouts can be moved about an area, but it isn't easy. Replicating the example here is best achieved by implementing the blocks and layouts sequentially. To do so in any other order can result in a lot of block moving. 

Also, take care when adding Magic Tabs blocks after a layout that they are located in the parent area and not accidentally dropped into a layout cell. If you drop Magic Tabs block into a layout cell by mistake, it won't work as expected.

Containers

Introduced with Concrete CMS v9, containers are pre-defined sub templates provided by a theme. From a tabs point of view, You can treat a container in the same way as you would treat you would a layout. 

Containers are implemented as a special type of block that introduces sub-areas according to the container template. You can't spread a tab set across areas. 

  • You can have a tab set within container area.
  • You can have a complete container within a single tab. The important consideration is that the Magic Tabs blocks must be outside the container, so the container is wholly contained within a single tab.

What is fundamentally impossible is to start a tab set in one container area and end it in another. To do so would break a fundamental rule of the DOM by interlacing elements.

Layout based tab addons

This is old news and irrelevant nowadays. Read it for some historical perspective.

Tabs and layouts both add extra structure to the DOM. That is why some less advanced tab addons dating back to Concrete CMS version 5.4 began with layouts and made each layout cell into a tab. Magic Tabs is more sophisticated than that and works by analyzing the DOM tree and injecting additional nodes to create the tabs.

If you are used to the complexities of layout based tabs addons, Magic Tabs is a lot easier. The most common mistake of users switching to Magic Tabs from layout based tabs addons it to assume complexity that just is not there!

Additional Pages