Tabs and Layouts

General Principles

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

Tabs and layouts both add extra structure to the DOM. That is why some less advanced tab addons dating back to concrete5.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.

Each cell of a layout is an area. You can't spread a block or stack across areas, so similarly you can't spread a tab across areas. 

You can have a tab set within an area (or layout cell). If you are careful in creating a layout, for concrete5.7+ you may be able to have one or more layouts wholly contained within one or more tabs.

What is fundamentally impossible is to start a tab in one cell 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.

Concrete 5.6 (legacy)

Layouts in concrete5.6 were fairly primitive and unreliable. As such, on concrete5.6 sites it is not recommended to try and place layouts within (between) tabs.

  • You can create a set of tabs wholly within a single layout cell.
  • A layout within a tab will not work.

If you need to create multiple columns within a tab on concrete5.6, the way to do so is using block design to add theme grid classes to individual blocks or stacks.

Concrete 5.7+

In concrete5.7+, including v8, Magic Tabs may contain layouts. 

  • You can create a set of tabs wholly within a single layout cell.
  • You can create a layout wholly within a tab (unlike c5.6). The important consideration is that the Magic Tabs blocks must be outside the layout, so the layout is wholly contained.

I can't demonstrate tabs and layouts directly on this site because it uses concrete5.6. To help concrete5.7 and v8+ users of Magic Tabs incorporate layouts into their tabs, here are a series of screenshots to show how it is done. The example here is a set of 3 tabs. Each tab contains a single content block. The second tab (Tab B) also contains a layout of 3 columns, and each column in the layout contains a further content block.

Tab A

Content A

Tab B

Content B

Layout of 3 columns

Column 1 content

Column 2 content

Column 3 content

Tab C

Content C

The main difficulty arises from the way the concrete5 UI creates and adds layouts. You can currently only add a new layout at the end of an area. Replicating the example below 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 because you can't move layouts or insert them later. 

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

Last updated: 4 months ago