[Container] Container in simple mode is treated as a grid by editor interface

[ky940819]

Bug Report

Current Behavior When a Container component is used on the page, and this container component is set to "simple" mode (i.e. single column), it is treated as a responsive grid by the authoring interface. This means that every child of this container will have the layout mode allowing the author to resize these components.

Although the author can resize the components, they typically cannot achieve anything other than creating the cq:responsive node with an offset=0, width=1.

Typically, the fact that the author was able to create this node is irrelevant, as it plays no role in the rendering of the simple mode container.

That said, there are two drawbacks to the author being able to create this node:

1. If the simple container is ever converted to a layout content, this content is now 1 column wide instead of the default when not defined (which would be max columns, e.g. 12).
2. Additionally, if the simple container contains - as a child - another container, then any children of that container becomes restricted to 1 column wide.

Expected behavior/code The user should not be able to resize, even trivially, the content inside of the simple container. Or, perhaps, even any container with a columns=1.

Environment

• AEM version: 6.5.7.0
• Core Components version: 2.14.0
• JRE version: Oracle JDK 11

Possible Solution I don't know of any fantastic solution to this that can be made inside the AEM Core Components project.

This behaviour is handled where AEM writes out the edit context information (e.g. the <cq data-path="..." data-config="..."></cq> dom nodes only present during editing.

the config data includes the field isResponsiveGrid, which is set to true if, and only if, the component type is of (or inherits from) the OOTB responsive grid component (which the Container component does). If the value of isResponsiveGrid could be set to false somehow, then the author would not be presented with the option to resize the components inside of the simple container, and thus could not cause the creation of the cq:responsive node.

If the value of this property could be derived from a property on the component then we could at least add wrappers components to the Container component to disable this sort of behavior. For example, if the isResponsiveGrid logic could be changed from a simple

resource.is('/libs/.../responsivegrid') 

To something along the lines of

  if (/*component has `cq:isResponsiveGrid` set*/) {
    // return that value
  } else {
    resource.is('/libs/.../responsivegrid')
  }

I know that implementing that fix is outside of Core Components project, but it provides an avenue to a workaround.

Another possibility is to create a separate "simplecontainer" component, one that does not inherit from the OOTB responsivegrid. This component can be referenced from within the Container component if layout mode is set to SIMPLE, but could be provided stand-alone, for those who have a use case of an actual simple container. The models could be essentially identical,

I hope someone else can make a better suggestion that is within the scope of this project.

Additional context / Screenshots Consider the following page content:

• Simple Container
  • Responsive Grid (12 child columns)
    • Text (width=8)
      • cq:responsive
        • default
        • @offset=0
        • @width=8

The user is allowed to make the trivial resize on the "Responsive Grid" component because the "Simple Container", despite being simple, is still treated as a responsiveGrid by the authoring interface. This allows the author to cause the creation of this:

• Simple Container
  • Responsive Grid (12 child columns)
    • cq:responsive
      • default (@offset=0, @width=1)
    • Text (width=8)
      • cq:responsive
        • default (@offset=0, @width=8)

Now, when AEM goes to render the Text component, it would really like to make it 8 columns wide, as desired, however it looks up the tree and sees that there are actually only 1 column available from the parent.

The policy is set to 12 columns, so it presents the 12 columns, however upon editing the layout of the Text component, the content will render at 1 of 12 column (i.e. smushed).

[dylanmccurry-msft]

Any update on this? I see the same behavior and would like to disable layout mode on certain container structures.

[roszpapad]

+1, we are also experiencing this issue.