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
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
Pekket
Level 2

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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.

Avatar

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
Pekket
Level 2

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.

Avatar

Avatar
Validate 1
Level 2
kumaranf
Level 2

Likes

2 likes

Total Posts

19 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 5
Affirm 3
View profile

Avatar
Validate 1
Level 2
kumaranf
Level 2

Likes

2 likes

Total Posts

19 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 5
Affirm 3
View profile
kumaranf
Level 2

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>

Avatar

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
Pekket
Level 2

14-11-2017

This didn't work

Avatar

Avatar
Validate 1
Level 2
kumaranf
Level 2

Likes

2 likes

Total Posts

19 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 5
Affirm 3
View profile

Avatar
Validate 1
Level 2
kumaranf
Level 2

Likes

2 likes

Total Posts

19 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 5
Affirm 3
View profile
kumaranf
Level 2

14-11-2017

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

14-11-2017

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

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

470 likes

Total Posts

1,039 posts

Correct Reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

470 likes

Total Posts

1,039 posts

Correct Reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

14-11-2017

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

Avatar

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
Pekket
Level 2

15-11-2017

No same result as preview mode

Avatar

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Ignite 1
Level 2
Pekket
Level 2

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
Pekket
Level 2

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