search

adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
747 stars 753 forks source link

Style system not working for Container/Layout Container #2112

Closed kapil-gahlawat closed 2 years ago

kapil-gahlawat commented 2 years ago

Environment

This issue was reported earlier: https://github.com/adobe/aem-core-wcm-components/issues/1889

This issue was marked as fixed in 6.5.12.0, which was released last month. It is working in this particular case. However, there is a corner case where it is not working. Here are the steps to reproduce:

Steps to reproduce the issue:

  1. We are using 6.5.12.0 and SPA react.
  2. Create an Experience fragment template and LOCK the container in the template structure. Apply style to the container in the template structure. I added a couple of components inside this container. Make sure to LOCK the container and apply the style to the container in the template structure.
  3. Now, create an experience fragment from the template created above. Experience fragments will have the style that we applied in the structure. So, it is working as expected.
  4. Now create a normal page using spa-page-template or any template that you like and drag and drop Experience fragment component inside the page. Now, configure the path to the experience fragment that we created in the step 2. Now experience fragment inside your page will not look the same as the style that we applied in the step 1 are not being applied in the page.

Summary: Applied style is working fine inside the experience fragment but when you consume this same experience fragment in a page using the Experience Fragment Component, style is not being applied.

Note: If you drag and drop the container inside Experience fragment and apply style and then use this experience fragment on a page, this style is working absolutely fine. The only specific case it is not working is: Container is in the structure of experience fragment template and Locked.

Additional context / Screenshots

Experience Fragment template structure (I have applied the style fixed-width to the layout container):

Screenshot 2022-03-25 at 18 06 06

After creating the experience fragment using the above template, this is how experience fragment looks like (Notice margin on the left and right. We have applied a CSS class fixed-width using container style to the template structure above):

Screenshot 2022-03-25 at 17 59 56

This is how the same experience fragment in a page looks like (Please notice there is no margin on the left and right of breadcrumb and image. CSS class applied using container style is not present when we include the experience fragment on the page):

Screenshot 2022-03-25 at 18 00 52
bpauli commented 2 years ago

@adobe export issue to Jira Project SITES as Bug

github-jira-sync-bot commented 2 years ago

:white_check_mark: Jira issue SITES-5621 is successfully created for this GitHub issue.

bpauli commented 2 years ago

@kapil-gahlawat Thank you for the hands up! Can you please verify if the PR at https://github.com/adobe/aem-core-wcm-components/pull/2116 will fix the issue?

kapil-gahlawat commented 2 years ago

@bpauli : I just tested the PR 2116 and it fixed the issue. Thanks for the quick response. Can we expect this fix in version 2.18.9?

bpauli commented 2 years ago

@kapil-gahlawat The change just got merged to the main branch and will be included in the next release.