Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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