Removing wrapper div in author & publisher view

[rachanam1547401]

Hi,

I was trying to remove wrapper div on components for a specific page types using following code.

getRequest().setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false);

It does remove the wrapper div but it also remove edit functionality on components.  My requirement is to preserve edit functionality and remove wrapper div as well in both author and publish mode.

Anyone has any idea on how to achieve this or it's not possible because the reason for wrapper div is to enable editing on the same page?

Thanks & Regards,

Rachna

[arunpatidar]

Hi,

Wrapper div allow editing in author mode, so if you want editing then you should't remove wrapper div from author.

Though you can place another custom tag

e.g.

AEM Developer Learning : Useful Properties of a Component in AEM 6.3

[Ravi_Pampana]

Hi,

Try <div ... data-sly-unwrap="${wcmmode.disabled}" ></div> to remove additional div in non edit mode.

you can try using cq:htmlTag node in your component to generate your custom div with custom class.

cq:tagName

[smacdonald2008]

As Arun suggests - removing that wrapper DIV in author will remove the ability for an author to make changes to a component.

WHy do you want to remove this DIV thereby removing author the ability to make changes to the component in the AEM Author server?

[rachanam1547401]

Hi All,

Thanks for your replies. 

We want to remove wrapping div in author because it breaks the grid layout and will require extra css to fix it.  We also don't want to stop edit functionality of the component.

Thanks

[arunpatidar]

Hi,

It is not possible to remove wrapper div without stopping edit functionality.

But you can write author edit mode specific CSS to fix grid layout in author.

e.g.

You can inject extra class for author mode and handle grid without impacting on other modes:

<div data-sly-test.author="${wcmmode.edit || wcmmode.design}" data-sly-unwrap></div>

<div class="row ${author ? author_row  : '' }">

  //

  //

</div>

you can write extra css for author_row in order to fix grid

[smacdonald2008]

What grid are you referring to? DO you mean AEM Responsive grig?

[rachanam1547401]

Hi Both,

Thank you for your help.  We are going to use Arun's solution to fix grid in author mode.

Also, we are using custom grid and not AEM responsive grid.

Regarding unwrapping div in publish mode, I couldn't use <div ... data-sly-unwrap="${wcmmode.disabled}" ></div> because we are adding parsys and dropping components in parsys.  I have to use getRequest().setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false); Basically I wrote a class extending WcmUse class and added above code in activate method of it.  Called the class from the specific renderer and it worked for all components on that page, and all pages using that renderer will not have wrapper div in publish mode.

Thanks,

Rachna