Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Class for responsivegrid

Avatar

Level 6

Hi Team,

 

I have added 2 responsivegrid component in html like below

<sly data-sly-resource="${'par1' @ resourceType='wcm/foundation/components/responsivegrid', class='customClass1'}"></sly>
<sly data-sly-resource="${'par2' @ resourceType='wcm/foundation/components/responsivegrid',class="customClass2}"></sly>

 

 

But I am not able to see customClass in CRX/de for responsivegrid

 

Can some one suggest me need to add custom class for each responsive grid.

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @manikanthar1295 ,

Please take a look at this thread where I have conducted high-level testing. I found that using <div> worked as expected, but when I tried using <sly>, it did not produce the desired results.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/adding-css-class-to-parsys...

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @manikanthar1295 ,

Please take a look at this thread where I have conducted high-level testing. I found that using <div> worked as expected, but when I tried using <sly>, it did not produce the desired results.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/adding-css-class-to-parsys...

Avatar

Employee Advisor

Hi,

To add custom classes to the responsive grid components in AEM:

  1. Open the component in CRX/DE or its dialog.
  2. Locate the "CSS Class" field.
  3. Enter your desired custom class(es), separated by spaces.
  4. Save the changes.

Make sure to use the correct syntax in your code:
<sly data-sly-resource="${'par1' @ resourceType='wcm/foundation/components/responsivegrid', class='customClass1'}"></sly>
<sly data-sly-resource="${'par2' @ resourceType='wcm/foundation/components/responsivegrid', class='customClass2'}"></sly>


 

>> After applying these steps, the custom classes will be visible in CRX/DE for the respective responsive grid components.

Avatar

Community Advisor

@manikanthar1295 

 

What you need is a decorationTagName='div' & change the class to cssClassName

<sly data-sly-resource="${'par2' @ resourceType='wcm/foundation/components/responsivegrid', decorationTagName='div', cssClassName='customClass2'}"></sly>

 

Thanks