Highlighted

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

Adobeaspirant

27-08-2018

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?

Replies

Highlighted

Arun_Patidar

MVP

27-08-2018

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

Highlighted

Adobeaspirant

27-08-2018

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.

InkedInkedCapture_LI.jpg

Highlighted

Arun_Patidar

MVP

27-08-2018

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>

Highlighted

Adobeaspirant

27-08-2018

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.

Highlighted

smacdonald2008

27-08-2018

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

Highlighted

Arun_Patidar

MVP

27-08-2018

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.