Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Position of cq-Editable-placeholder element changes after edit.

Avatar

Level 4

Hello,

The component-placeholder extends to full-width after editing and without page-refresh.  It retains to original width after page-refresh but is there any way we can retain the original-design after-edit?  Please help.

Screenshot BEFORE editing the component:

1411695_pastedImage_9.png

Screenshot AFTER editing the component:

1411694_pastedImage_8.png

Thanks & Regards,

Akash

1 Accepted Solution

Avatar

Correct answer by
Level 4

I think i will work with the following solution until there's another more appropriate way to do it.  Basically, we will work with <div> instead of <sly /> and will data-sly-unwrap only if it is not wcmmode.isEdit as shown in the screenshot below:

1412729_pastedImage_0.png

The following screenshot is taken after the above implementation and AFTER editing inline:

1412730_pastedImage_1.png

Thanks & Regards,

Akash

https://forums.adobe.com/message/10159324#10159324

View solution in original post

7 Replies

Avatar

Administrator

Do you see some error in the browser?

And what are the steps to reproduce it? Also share the AEM version!!



Kautuk Sahni

Avatar

Level 4

Hi Katuksahni,

Thank you for your response.

No, there are no errors on the browser.

The method to isolate it is quite simple:

<div class="container"

    data-sly-resource="${ 'myImage' @ resourceType='wcm/foundation/components/text' }"

    data-sly-unwrap="${properties.text}">

        ${properties.text @ context='html' }
</div>

If you don't have the Bootstrap "container" class in your css, please add the following style:

<style>

   .container {

          width: 75%;

          margin: 0 auto;

    }

</style>

I'm working with AEM v6.3 (fully updated).

Regards,

Akash

Avatar

Level 10

If you place an image and look at the page in Preview mode - are you seeing an issues. My guess is no.

Avatar

Level 4

hi smacdonald2008​,

Yes, i'm still seeing the issue in Preview mode.

Thanks & Regards,

Akash

Avatar

Level 10

This is strange issue. Looks like a CSS issue or conflict. What extra CSS are you using?

Avatar

Level 4

Hi smacdonald2008​,

I am working with Bootstrap 4 in my project; however, it may not be CSS related issue since it occurs on the sample project in archetype11 project.

BEFORE edit:

1412571_pastedImage_0.png

AFTER edit:

1412572_pastedImage_1.png

The yellow rectangle is the new code add in the Archetype11 project.  The path of the file where it is added is: ~/components/structure/page/partials/main.html

1412592_pastedImage_3.png


Thanks & Regards,

Akash

Avatar

Correct answer by
Level 4

I think i will work with the following solution until there's another more appropriate way to do it.  Basically, we will work with <div> instead of <sly /> and will data-sly-unwrap only if it is not wcmmode.isEdit as shown in the screenshot below:

1412729_pastedImage_0.png

The following screenshot is taken after the above implementation and AFTER editing inline:

1412730_pastedImage_1.png

Thanks & Regards,

Akash

https://forums.adobe.com/message/10159324#10159324