container fluid vs container class in same page using different components.

[Adobeaspirant]

How can we use class container vs container fluid on a same page? We are having a header and footer which has to break the grid but the body has to be with in the page with padding on both sides which uses container class. Please suggest a way to use achieve this?

[arunpatidar]

Hi,

Did you mean different classes for different sections in the page?

You can do like below in component

<div>

    <header class="container fluid">

        <div data-sly-resource="${'header-par' @ resourceType='wcm/foundation/components/parsys'}"></div>

    </header>

   <div class="container" data-sly-resource="${'body-par' @ resourceType='wcm/foundation/components/parsys'}"></div>

<footer class="container fluid">

        <div data-sly-resource="${'footer-par' @ resourceType='wcm/foundation/components/parsys'}"></div>

    </footer>

</div>

Please let us know the specific case if above doesn't help

[Adobeaspirant]

Thanks Arun,

We have a requirement of having different components to be on body also should container fluid class.

I had a priority check box. I want to use <sly data-sly-test="${currentPage.resource.properties.isPriority}"> to get the boolean value of that component. If this is priority one i will use container-fluid else will use container.

[arunpatidar]

Try something like below if helps:

<sly data-sly-test.priorty="${properties.isPriority}"><sly data-sly-test.container="container-fluid"/></sly>

<sly data-sly-test="${!priorty}"><sly data-sly-test.container="container"/></sly>

<div class="${container}">demo data</div>

[Adobeaspirant]

Can we test the component property on at template level ?

[arunpatidar]

Hi,

It is possible but not with HTL alone you need to use either JS Use API or Java to get component and its property but it will increase page load time.

Still I am confuse why you need to do this on template level if you need switcher on body level, just create dialog to body component and handle class from there.

[smacdonald2008]

What AEM Version are you using. Are you using editable templates to place headers onto a template?

[Adobeaspirant]

We are using AEM 6.3 and we are using editable templates. Also we are using experience fragments. Header and footer we are planning to build as fragments.

[smacdonald2008]

You can just as easily put an Experience fragment that represents a header or footer into an editable template. Then you can lock that in the editable template so an author cannot modify that content. When you create a page based on that template - the header and footer shows up.

It does not matter if you build the header as an EF  or an HTL component. Either way - you can drag that onto an editable template.

For those reading this and want to know how to build headers and footers (via HTL) in an editable template - see .Adobe Experience Manager Help | Creating an Adobe Experience Manager 6.4 website using Editable Temp...

or this...

Scott's Digital Community: Guided Journey for Experience Manager on Editable Templates