Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Nested Responsive Grid

Avatar

Level 4

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>
6 Replies

Avatar

Level 4

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

Avatar

Level 10

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.

Avatar

Level 4

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

Avatar

Level 10

Are you referring to the column control components ?