Nested Responsive Grid | Community
Skip to main content
crisr1
crisr1
Level 4
April 6, 2016

Nested Responsive Grid

  • April 6, 2016
  • 2 replies
  • 5696 views

Reviewing the information about the AEM6.1 Responsive Grid, http://adobe-marketing-cloud.github.io/aem-responsivegrid/ and http://www.slideshare.net/GabrielWalt/aem-responsive 

Slide 11 indicates that when nesting layout containers, the number of columns should be fixed and not reset. But in my attempts at this, the nested layout containers show 12 columns even though the container is nested and set to 8 columns with respect to the parent. The customization applied wraps the responsivegrid in a section tag to apply a background color to the section.

<section class="${properties.themeColor ? properties.themeColor : ''}-bg"> <section data-sly-test="${properties.bgOptions != 'none'}" class="${properties.themeColor ? 'section-bg': ''} ${properties.bgOptions}"> <section class="${properties.wrapper? 'container' : ''} ${properties.innerOptions}"> <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"> </div> </section> </section> <section data-sly-test="${properties.bgOptions == 'none'}"  class="no-outer-bg ${properties.bgOptions}"> <section class="${properties.wrapper? 'container' : ''} ${properties.innerOptions}"> <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"> </div> </section> </section> </section>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

smacdonald2008
smacdonald2008
Level 10
April 6, 2016

Did you build the code and look at it running: 

https://github.com/Adobe-Marketing-Cloud/aem-responsivegrid

crisr1
crisr1Author
Level 4
April 6, 2016

Thanks! That will be a good reference. The difference in this case is that I was trying to add section tag around the responsivegrid component to style the background color on the margins outsides of the grid container. It was really only needed on the outermost one. So the problem was basically fixed for the nested layout container components by adding the non-customized Layout Container instead on mine (which was adding section tags wrapping the responsivegrid component) 

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
Level 10
April 7, 2016

I dont see you defining the nested grid in the above piece of Code. Where have you grouped 8 columns here ??

refer slide #29 here http://www.slideshare.net/GabrielWalt/aem-responsive to achieve the nested grid.

crisr1
crisr1Author
Level 4
April 7, 2016

The responsivegrid component (Layout Container) can be dropped into the responsivegird like a regular component. This is what I am referring to as a being 'nested.'

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
Level 10
April 7, 2016

Are you referring to the column control components ?

Terms & ConditionsAccessibility statement

Loading footer...