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

Pekket

13-11-2017

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

Replies

Highlighted

smacdonald2008

13-11-2017

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.

Highlighted

Pekket

14-11-2017

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.

Highlighted

kumaranf

14-11-2017

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>

Highlighted
Highlighted
Highlighted

Veena_Vikram

MVP

14-11-2017

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

Highlighted

Pekket

15-11-2017

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