Responsiveness through grid-based layouts in AEM 6.1 | Community
Skip to main content
vasimakram
vasimakram
Level 4
March 23, 2016
Solved

Responsiveness through grid-based layouts in AEM 6.1

  • March 23, 2016
  • 5 replies
  • 1717 views

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.

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

5 replies

edubey
edubey
Level 10
March 23, 2016

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
Lokesh_Shivalingaiah
Level 10
March 23, 2016

Hi Vasim,

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

vasimakram
vasimakramAuthor
Level 4
March 24, 2016

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 .

A
ankurk67503819Accepted solution
Level 4
March 28, 2016
        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
crisr1
Level 4
April 6, 2016

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>
Terms & ConditionsAccessibility statement

Loading footer...