Programmatically edit Wrapper DIV classes?

Handling this on the front end is incorrect, IMHO because it'll cause a shift in layout as the page loads. It's worthwhile to note that this is mainly an issue in the author because we don't display the wrappers on the publisher and on; so given that, I guess we could use JS to 'shim' this for the author env - but given the author looks at the page DOM to setup the areas for the authoring interface, I wonder if this will cause issues...

BTW - Veena's example is based on HTL/Sling Modles and uses -- https://getbootstrap.com/docs/4.0/layout/grid/

So - we don't use Bootstrap; but that being said, most grid systems rely on parents and children to define a container

This is how most systems work:

<div class="grid"> = could be 100% width of the page

     <div class="row-6">This is a six column row</div> = could be 50% width of the row

     <div class="row-3">This is a three column row</div> = could be 30% width of the row

     <div class="row-2">This is a two column row</div> = could be 20% width of the row

     <div class="row-1">This is a one column row</div> = could be 10% width of the row

</div>

In AEM, this looks like:

<div class="grid-wrapper section cq-Editable-dom">

     <div class="grid"> = could be 100% width of the grid-wrapper

          <div class="row-wrapper section cq-Editable-dom">

              <div class="row-6">This is a six column row</div> = this is now 50% of the row-wrapper, not the grid

          </div>

          <div class="row-wrapper section cq-Editable-dom">

               <div class="row-3">This is a three column row</div> = this is now 30% of the row-wrapper, not the grid

          </div>

          <div class="row-wrapper section cq-Editable-dom">

               <div class="row-2">This is a two column row</div> = this is now 20% of the row-wrapper, not the grid

          </div>

          <div class="row-wrapper section cq-Editable-dom">

               <div class="row-1">This is a one column row</div> = this is now 10% of the row-wrapper, not the grid

          </div>

     </div>

</div>

I want to bubble up our row size classes to the wrapper level, but I need to be able to edit the wrapper classes programatically.

@Veena Vikraman  -- do you have thoughts here?

Have you tired to find a solution for this using BOOTStrap and modifying the DOM outside of AEM?

So when created propely - an author can choose the number of columns in the grid, etc.

Yeah - we have something very similar to that and the issue is that modern responsive grid systems allow you to do things like reorder columns at different breakpoints or change the size of columns at breakpoints, ect... Our design folks are asking for a level of flexibility we need to find a way to provide.

So having fixed patterns for columns isn't going to work for us; we're trying to create a component that lets us define a 'row' component and then a 'column' component - but wrappers create a problem for how styles interact with one another.

This looks like a complicated way to build a custom grid. A much better way is to expand the SLing Model Java code based on Veena's grid example that i listed above. Then give the author choices in the dialog. You should not have to modify/hack wrapper classes to change the grid.

Arun - yes; you can change the tag name, but I'm looking to change the name of the classes. Also - as I understand it, if you ​remove the tag, then the component becomes un-editable.

HI,

I tried above code in AEM 6.3, it does work but it does allow you to add extra decorative tag. I won't let you to add class.

Component jsp file -

<%@page session="false"%><%@ page import="com.day.cq.wcm.foundation.Placeholder,com.day.cq.wcm.api.components.IncludeOptions" %>

<%@include file="/libs/foundation/global.jsp"%>

<%

   IncludeOptions opts = IncludeOptions.getOptions(request, true);

   opts.setDecorationTagName("");

%>

Output with opts.setDecorationTagName(""); and opts.setDecorationTagName("arun-test");