AEM: Not applying custom styles in editor mode when first stated | Community
Skip to main content
brendanf9753525
brendanf9753525
New Participant
October 4, 2018
Solved

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

  • October 4, 2018
  • 1 reply
  • 1716 views

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.

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

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

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

1 reply

Peter_Puzanovs
Peter_PuzanovsAccepted solution
New Participant
October 5, 2018

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

    Terms & ConditionsAccessibility statement

    Loading footer...