AEM Style system not working

Avatar

Avatar
Establish
MVP
santhosh_kumark
MVP

Likes

99 likes

Total Posts

111 posts

Correct reply

38 solutions
Top badges earned
Establish
Validate 1
Give Back 3
Give Back
Boost 50
View profile

Avatar
Establish
MVP
santhosh_kumark
MVP

Likes

99 likes

Total Posts

111 posts

Correct reply

38 solutions
Top badges earned
Establish
Validate 1
Give Back 3
Give Back
Boost 50
View profile
santhosh_kumark
MVP

06-08-2020

Style classes are not mapping onto component when applied from AEM style options, but these classes are working fine when placed in Html directly. I have checked we-retail there styles are working fine. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

07-08-2020

Hello @santhosh_kumark,

As per the Decoration Tag documentation​:

 

The behavior of the wrapping DIV can be controlled via the HTL that embeds the component. To make sure the wrapping DIV (and corresponding layout & style classes) are added, you must specify the "decoration=true" option as follows:

 

<sly data-sly-resource="${'list'@ resourceType='weretail/components/content/list', decoration=true}"></sly>

 

Version 2 of the core components is fully enabled to take advantage of the style system and requires no additional configuration.

Follow the steps to enable the style system for your own custom components or to extend the version 1 core components to utilize the feature.

 

In order for a component to work with AEM's style system and show the style tab in its design dialog, the component developer must include that tab from the product with the following settings on the component:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

 

With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen.

 

Thanks!!

Answers (1)

Answers (1)

Avatar

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

233 likes

Total Posts

295 posts

Correct reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

233 likes

Total Posts

295 posts

Correct reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile
Shashi_Mulugu
MVP

07-08-2020

@santhosh_kumark What type of component is it, Container or standalone? How are you adding that component to page, using Layout container OOTB or any custom parsys/responsivegrids?

 

Style system depends on the wrapper DIV which gets generated by default. Please check your implementation if you are truncating the wrapper div by any chance.

 

IF you are using any custom way to render component, make sure you include wrapper div as below:-

 

<sly data-sly-resource="${'comp-name' @ resourceType='RESOURCETYPE', decorationTagName='div', cssClassName='comp-name'}" />