Skip to main content
R
Ronald_Diemicke
New Participant
October 15, 2018

Programmatically edit Wrapper DIV classes?

  • October 15, 2018
  • 18 replies
  • 9651 views

Hey folks,

I'm working on a custom grid building component. The problem I'm having is that the wrapper div is negatively effecting my ability to build columns (the columns set a width of the parent, but on the author this looks weird, because the column's parent is actually the wrapper, not the row element)

I know I can remove the wrapper, but then the column isn't editable, which won't work for me. I know I could use the cq:htmlTag node to edit the tag, class and id - but because the size of the column is author-able, I need a way from the java side to add a class to the wrapper.

Any ideas or an alternate suggestion?

Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

18 replies

Show previous replies
R
Ronald_DiemickeAuthor
New Participant
October 18, 2018

The problem with that is that if we hide the wrapper completely; then the dialog doesn't work :/

Also - I've tried `.getOptions(getRequest(), true).getCssClassNames().add("TEST_CELL");` for IncludeOptions and it doesn't seem to work.

arunpatidar
arunpatidar
New Participant
October 18, 2018

Hi,

There is Java API which you can use to handle decoration tags

com.day.cq.wcm.api.components ("The Adobe AEM Quickstart and Web Application.")

https://www.codermag.net/2016/02/remove-component-wrapper-divs-in-cqaem.html

Arun Patidar
R
Ronald_DiemickeAuthor
New Participant
October 18, 2018

Ok - Is there a way to include a component (parent) in another component (child) and have the child component's dialog and parsys still work?

smacdonald2008
smacdonald2008
New Participant
October 18, 2018

I am not aware of an AEM specific API to change the DIV classes other then standard JS

html - Change an element's class with JavaScript - Stack Overflow

R
Ronald_DiemickeAuthor
New Participant
October 18, 2018

No - just the classes the wrapper component writes; but I need to be able to change them dynamically.

smacdonald2008
smacdonald2008
New Participant
October 18, 2018

The only think i can think of is adding more sizes to the dialog and then having the back end Java ColumnControl code render those sizes.

R
Ronald_DiemickeAuthor
New Participant
October 18, 2018

We're trying to implement a solution a bit more dynamic than this to allow grids to be more freely authored. I think we'd still like to see if there's a way to programmatically change the wrapper classes for a component OR use a component's HTL to include another component that has it's dialog as still being author-able.

smacdonald2008
smacdonald2008
New Participant
October 15, 2018

Veena Vikraman  wrote a similar component that uses Sling Models and HTL for a grid component that is authored - Creating a custom Touch UI Grid Component for Adobe Experience Manager

Terms & ConditionsAccessibility statement

Loading footer...