Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
Adobeaspirant
Level 3

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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

Avatar

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
Adobeaspirant
Level 3

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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>

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

27-08-2018

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

Avatar

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
Adobeaspirant
Level 3

27-08-2018

Can we test the component property on at template level ?

Avatar

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 3
Adobeaspirant
Level 3

Likes

21 likes

Total Posts

59 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
Adobeaspirant
Level 3

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.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,261 likes

Total Posts

3,150 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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.