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

[SiddharthDixit]

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.

[arunpatidar]

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.

[BrianKasingli · Accepted solution]

@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.

[SiddharthDixit]

@BrianKasingli,
Thanks for the response.

Here is some background knowledge regarding my query, As I'm new to AEM I have created the static template and now I'm trying to create editable one. I'm trying to use the same components created for my static template in "WE-Retail Editable Template". I have used bootstrap classes in those components thats why the suggested reply was correct and was disturbing the CSS. Please help me out how can I add my custom css to it, also how can I override or use the responsive grid classes of we Retail template.

I have tried to include the CSS through page policy some of the styling properties are working fine but some are not visible,(for eg. background color is visible but the padding and layout are wrong or not visible at all). Why is this happening and how can I resolve this problem?

Looking forward and Thanks in Advance!