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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

My custom component is getting resized in Parsys

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

10 Replies

Avatar

Level 10

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.

Avatar

Level 10

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

Avatar

Community Advisor

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.

Avatar

Community Advisor

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

Avatar

Correct answer by
Level 10

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

Avatar

Community Advisor

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.

Avatar

Level 10

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.

Avatar

Community Advisor

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

Avatar

Level 3

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.

Avatar

Administrator

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