container fluid vs container class in same page using different components. | Community
Skip to main content
Adobeaspirant
Adobeaspirant
Level 3
August 27, 2018

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

  • August 27, 2018
  • 2 replies
  • 4069 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
August 27, 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

Arun Patidar
    Adobeaspirant
    AdobeaspirantAuthor
    Level 3
    August 27, 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.

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    August 27, 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>

    Arun Patidar
    Adobeaspirant
    AdobeaspirantAuthor
    Level 3
    August 27, 2018

    Can we test the component property on at template level ?

    Terms & ConditionsAccessibility statement

    Loading footer...