My custom component is getting resized in Parsys

[kishored6899358]

Hi,

I am using AEM 5.6.1 and have developed a component using boot-strapper and jQuery. The user interface is designed in .jsp (html, css and Javascript). When we drag and drop the component onto Parsys, the UI is showing but getting resized in design/preview mode. This is disturbing the actual look and feel.

Does anyone have idea why this is getting resized? Can we do anything for Parsys?

Regards,

Kishore

[smacdonald2008]

Try looking at the page under /content - if you have set the CSS properly - when you look at it directly under /content/<path>/YourPage.html - it should render properly.

Also - 5.6 is very old and there has been major fixes since then.

[smacdonald2008]

and you should never have to modify Parsys to make a component render.

[Ratna_Kumar]

Hi,

Yes, Scott is right. You should never resize/modify the Parsys, other it will be big problem.

I think you can set CSS properly as Scott suggested.

~Ratna.

[Prince_Shivhare]

Please check the suggestions as mentioned above by Ratna and Scott.

Also please check if you have used any class with including a parsys. and the same class if you are giving any width or height in css.

Please do not modify the parsys. if you are looking to do something with parsys then you can give a class and can do changes in css.

your component will behave same as parsys in width if you are dragging and dropping the component.

Regards,
Prince

[edubey · Accepted solution]

My thoughts here:-

Regarding parsys modification, I have seen some requirements which do require overriding OOTB parsys with some changes. So this can be done if you have any such requirement. (Definitely not inside /libs). You can do this when you are REALLY sure its issue/ bug/ limitation with OOTB parsys.

Regarding your question

To an extent, it could be the issue with styling and HTML.
Try to remove some styling and alter HTML to see when it's breaking.

If you are asking anything related to UI (resize, breaking, ...) I would encourage to share some screenshots, so that community gets the better idea of the problem and you get the better solution.

Thanks

[VeenaVikraman]

Hi Kishore

          As far as what could I understand from your question, it could be totally because of any CSS overriding your bootstrap CSS. Can you go to Inspect element and see which CSS is overriding your designs and resizing your div ? If possible could you send us a screenshot.

[smacdonald2008]

Better yet - create an AEM Package of your component and put it on Google drive so communtiy can load it can see it working - i have a 5.6 instance to test.

[VeenaVikraman]

If that will work fine in 6.2 , I can also give a look

[kishored6899358]

Really appreciate everyone quick responses. I have analyzed further and the issue with custom CSS. It was actually overriding my bootstrap CSS as both have classes with same name.

Thanks everyone again.

[kautuk_sahni]

Just want to help you with how to debug the CSS issue within AEM:-

Use of "?debugClientLibs=true" in the page URL like http://<AEM URL>:<AEM Port><Content URL>?debugClientLibs=true

This will download all the js/CSS files individually making debugging easier.

~kautuk