Responsive Grid component clarification | Community
Skip to main content
manikanthar1295
manikanthar1295
Level 5
April 24, 2023
Solved

Responsive Grid component clarification

  • April 24, 2023
  • 2 replies
  • 878 views

HI Team,

 

I have custom component where Author can author number Like (1,2,3,4,5,6) any value.

If Author Authors Like 4 Then i am getting the value in sling model from that i need to include the Responsive grid  like 

<div class="aem-Grid aem-Grid--12">

<div class="aem-GridColumn aem-GridColumn--default--4"></div>

 <div class="aem-GridColumn aem-GridColumn--default--4"></div>

<div class="aem-GridColumn aem-GridColumn--default--4"></div>

</div>

 

If Author Authors like 6 then the Responsive grid should like 

 

<div class="aem-Grid aem-Grid--12">

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

 <div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

 <div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

</div>

 

Based on Author Number we need to calculate and need to generate Responsive grid

How we can achive this 

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 Saravanan_Dharmaraj

@manikanthar1295 Since in sightly you cannot do logic manipulation, you do your logic of how to split 12 columns in model itself and return the result as list like eg: [2,2,2,2,2,2] for "6" selected in dialog. You can loop thru that list and put it in the div.class in sightly. 

you need to think about when 5 is selected, how to divide 12 col by 5. 

2 replies

Saravanan_Dharmaraj
Community Advisor
Saravanan_DharmarajCommunity AdvisorAccepted solution
Community Advisor
April 24, 2023

@manikanthar1295 Since in sightly you cannot do logic manipulation, you do your logic of how to split 12 columns in model itself and return the result as list like eg: [2,2,2,2,2,2] for "6" selected in dialog. You can loop thru that list and put it in the div.class in sightly. 

you need to think about when 5 is selected, how to divide 12 col by 5. 

    H
    harishpvl1
    Level 2
    April 25, 2023

    you can go through this 'http://www.6dglobal.com/blog/creating-column-control-adobe-cq-2012-02-07' link . Instead of JSP you can use slightly code.

    <div data-sly-resource="${ columnList.index @resourceType='wcm/foundation/components/parsys'}"/>

    ' 

      Terms & ConditionsAccessibility statement

      Loading footer...