Using multiple nested-modules in apostrophe CMS

Question

I am creating a set of modules (widgets) with apostrophe-cms (2.x). Now I want to create different nested widgets, to use some of the modules e.g. in a 2-column layout. I followed the tutorial for nested-widgets https://apostrophecms.org/docs/tutorials/getting-started/layout-widgets.html and created a simple two column layout:

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Two Column Layout',
  contextualOnly: true,
  addFields: [{
      name: 'columnLeft',
      type: 'area',
      label: 'Left Area',
    },
    {
      name: 'columnRight',
      type: 'area',
      label: 'Right Area',
    }
  ]
};

In part this works. I can add other widgets inside the two areas and the html gets correctly built. The problem comes when I use other widgets below the two column layout. Taking a look at the Inspector, I see that all widgets below get built inside the two-column apos-area-widget-wrapper . When I only want to delete the two column widget then, I also delete all modules below. (See image Link)

Chrome Inspector, wrong nesting of widgets inside the two column widget

Am I missing something or does the nested layout somehow miss its closing tag, so everything gets pulled into it?

(Update): Trying to narrow down the problem: I can add new (non-layout-only) modules below, they appear correct. As soon as I try to add another layout widget, I cannot do anything with it as it does not save any information.

(Update): GitHub Project for demonstration: https://github.com/raphaelurban/apostrophe-test

Please link to a project in GitHub that demonstrates the issue. — Tom Boutell
Sounds like broken markup extending your areas beyond their intended scope but a repo would be helpful — Stuart Romanek
I created a small repo to display the error here: github.com/raphaelurban/apostrophe-test . The problem arises as soon as I use the "two-column" widget. — Raphael

Stuart Romanek Stuart Romanek · Accepted Answer · 2018-06-04T13:31:18

I'm not getting exactly your behavior but indeed the template for accordion-widgets does not properly close it's markup. The leak could affect different browsers differently, in Chrome I'm getting some broken stacking.

Using multiple nested-modules in apostrophe CMS

1 Answers