Class for responsivegrid | Community
Skip to main content
manikanthar1295
manikanthar1295
May 17, 2023
Solved

Class for responsivegrid

  • May 17, 2023
  • 3 replies
  • 1056 views

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.

 

 

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

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/m-p/204490

3 replies

MayurSatav
Community Advisor and Adobe Champion
MayurSatavCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
May 17, 2023

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/m-p/204490

    ManviSharma
    Adobe Employee
    ManviSharmaAdobe Employee
    Adobe Employee
    May 17, 2023

    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
      Community Advisor
      Lokesh_VajralaCommunity Advisor
      Community Advisor
      May 18, 2023

      @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

        Terms & ConditionsAccessibility statement

        Loading footer...