Class for responsivegrid

[manikanthar1295]

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.

[MayurSatav · Accepted solution]

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...

[ManviSharma]

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.

[Lokesh_Vajrala]

@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