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

Responsive Grid component clarification

  • April 24, 2023
  • 2 replies
  • 872 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

H
harishpvl1
New Participant
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'}"/>

' 

    Saravanan_Dharmaraj
    Saravanan_DharmarajAccepted solution
    New Participant
    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. 

      Terms & ConditionsAccessibility statement

      Loading footer...