Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Responsiveness through grid-based layouts in AEM 6.1

vasimakram
Level 4
Level 4

Hi All,

   We are working on a demo to get responsiveness using Layout container . We see the components that are dragged and dropped in responsive grid parsys can be re-sized using breakpoints in emulator. So how to achieve the same behavior for the components that are cq included in templates ? OR will it only work for components that are dragged and dropped in responsive grid parsys. Thanks in advance.

1 Accepted Solution
ankurk67503819
Correct answer by
Level 4
Level 4
        Basically grid system is based on bootstrap and if you wanna achieve at template level using cq include you need to include your components insides col-xs-12 divs etc.. You can read more on bootstrap and accordingly create the grid in your template.

View solution in original post

0 Replies
edubey
Level 10
Level 10

Hi,

Not quite clear on your issue, this is what is understood.

Component which are dragged and dropped are responsive on page in publish but you also want responsiveness on the component which are included at template level which currently you are not getting??

Please correct If I am wrong...

Do share screenshot...it might help

Lokesh_Shivalingaiah
Community Advisor
Community Advisor

Hi Vasim,

If your component is responsive, it should work irrespective of how it is included. Responsiveness depends on your markup

vasimakram
Level 4
Level 4

Hi,

I am talking about Layout container component. Which is OOTB component in AEM 6.1. It works as parsys. When we add any component to this container it will provide a grid system. Using that grid we can re-size our component based on emulators.

My question is instead of doing drag and drop of components in Layout container we can include components in page using <cq:include>. How can we achieve this grid system for the components which are cq:include .

ankurk67503819
Correct answer by
Level 4
Level 4
        Basically grid system is based on bootstrap and if you wanna achieve at template level using cq include you need to include your components insides col-xs-12 divs etc.. You can read more on bootstrap and accordingly create the grid in your template.
crisr1
Level 4
Level 4

I haven't tried this, but I think you may need to change the resource type of the parsys within the template to be that of the layout container... from "wcm/foundation/components/parsys" to "wcm/foundation/components/responsivegrid

 

<jcr:content cq:designPath="/etc/designs/your-site" jcr:primaryType="cq:PageContent" sling:resourceType="your-site/components/pages/subpage"> <par jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/responsivegrid"> <embedded_comp jcr:primaryType="nt:unstructured" sling:resourceType="your-site/components/your_component" > </embedded_comp>