Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Sly-resource won't place class selectors in preview mode

Pekket
Level 2
Level 2

I use data-sly-resource like this.

The goal is to create a component where you can pick a begin date and an end date.

<div>
   van:

   <div>
  <sly data-sly-resource="${'./date1' @ resourceType='fd/af/components/guidedateinput'}"/>
  </div>
   tot:

   <div>
  <sly data-sly-resource="${'./date2' @ resourceType='fd/af/components/guidedateinput'}"/>
  </div>
</div>

The problem im having is that the class selectors aren't placed on the html tags for the date input component in preview mode.

And because of that the css isn't loaded.

This is edit mode.

Screen Shot 2017-11-13 at 10.39.11.png

This is preview mode.

Screen Shot 2017-11-13 at 10.39.40.png

Thanks

12 Replies
smacdonald2008
Level 10
Level 10

In your syntax - i am not seeing any reference to class in the divs. For example --

<div class="twelve columns">

Place class referennce ins the <div> tag that corresponds to CSS.

Pekket
Level 2
Level 2

The css needs to be placed dynamicaly.

The data-sly-resource loads in the whole html component with the css class selectors.

This works in edit mode but not in preview mode.

smacdonald2008
Level 10
Level 10

Does it work when you remove /editor.html/ from the URL and it serves up the page without Touch UI mode.

kumaranf
Level 2
Level 2

Could you please try this:

<div>
  van:

  <div>
  <div data-sly-resource="${'./date1' @ resourceType='fd/af/components/guidedateinput'}"></div>
  </div>
  tot:

  <div>
  <div data-sly-resource="${'./date2' @ resourceType='fd/af/components/guidedateinput'}"></div>
  </div>
</div>

kumaranf
Level 2
Level 2

Edit the HTML of the component so as to remove dependency on rendering by Author and/or Preview mode.

Veena_Vikram
Community Advisor
Community Advisor

Could you please details on how the above said CSS is rendered in fd/af/components/guidedateinput' component ?

Pekket
Level 2
Level 2

This is the out of the box component.

1349045_pastedImage_0.png

This is one of my components...

The class selecters aren't placed on..

1349046_pastedImage_1.png

i'll guess it has something to do with with cq:styleConfig that isn't loading when using data-sly-resource?

1349142_pastedImage_0.png

Veena_Vikram
Community Advisor
Community Advisor

@Pekket

     I understand the issue. Could you please send me your code which is not working over mail. I will do an analysis and see if I can figure out the exact issue

Thanks

Veena

Pekket
Level 2
Level 2

Veena_07

What code you want me to send? Can't send whole project..

Veena_Vikram
Community Advisor
Community Advisor

Oh thats my bad. I mistook this post for some component in AEM core components. I was not aware this was specifically for adaptive forms .