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

Unexpected variation in component's behaviour when used in editable templates.

Avatar

Avatar
Validate 1
Level 1
SiddharthDixit
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
SiddharthDixit
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
SiddharthDixit
Level 1

04-03-2020

Hi,

I have created a component that works fine with my static template but shows some unexpected variations ( e.g.- wrong positioning, cannot be resized, cannot be deleted, without CSS properties, etc.) when used in an editable template. And also the same components show different variations for different editable templates. How can I make a component to show the same behaviour in editable templates as in static templates?

Please feel free to ask in case more information is required.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

219 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

219 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

04-03-2020

@SiddharthDixit ,

Wrong positioning, sizing, colour seems like a CSS issue. When utilising editable templates, I assume that you are using the responsive grid component. Unlike the parsys (/libs/foundation/...) which add a parent wrapper around each component with a few basic StyleClasses, the responsive grid components add many additional classes. The responsive grid will add a parent wrapper around each of your components, on top of that, the AEM-GRID CSS classes. The AEM-GRID classes enable template authors to adjust the layout based on the configuration in the template editor; the powerful feature gives template authors the flexibility to create any kind of layout. The AEM-GRID classes may be the reason why you are experiencing these hardships. 

You can try to extend the responsive grid component and remove the generation of the AEM-GRID classes. Hopefully, this will solve your mysterious CSS problems.

Answers (1)

Answers (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,156 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,156 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

04-03-2020

Can you check if both static and dynamic templates has the same page components and clientlibs applied.

To debug further check both the dynamic components.

You can't edit the component in page if you added as structure, if you will add that in initial then only you can edit.