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