Expand my Community achievements bar.

SOLVED

AEM: Not applying custom styles in editor mode when first stated

Avatar

Level 4

Hi guys,

I have an AEM component that lets editors put text in and the text (and only text) and it automatically styles as orange, bigger text.

I'm having a weird issue where in editor mode, when you change the text at all, the style completely gets removed like below. But the style is still there if you refresh the page or view it in publisher mode.

1587920_pastedImage_2.png

1587922_pastedImage_3.png

The is happening for any component that I have a div and style applied to. Below is how I am applying this style.

<div class="text-orange-large" data-sly-resource="${'text-satisfaction-orange-1' @ resourceType='foundation/components/text'}"></div>

Does anyone know how I can ensure that AEM uses the correct styles in editor mode and my editors don't need to refresh to see the changes go through?

Thanks

Brendan

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Dear Brendan,

One way to solve this, is to wrap entire div in text-orange-large.

<div class="text-orange-large">

     <sly data-sly-resource="${'text-satisfaction-orange-1' @ resourceType='foundation/components/text'}"></sly>

</div>

Regards,

Peter

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Dear Brendan,

One way to solve this, is to wrap entire div in text-orange-large.

<div class="text-orange-large">

     <sly data-sly-resource="${'text-satisfaction-orange-1' @ resourceType='foundation/components/text'}"></sly>

</div>

Regards,

Peter