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

How does Parsys set the style for width & height?

Avatar

Level 4

Hi everyone,

I have a parsys component set up to load several images/videos.

My question is about the styling of these components in editor mode.

Some of the components I have added are a reasonable size, but one component in particular has an enormous width. This width makes it difficult to click on other components and overlaps over them. I can add an image/video in this component but when I do it takes up the entire container despite the image/video being 1/16 the size of the container.

My question is how does AEM determine what the width and height of these components are? Where do the bolded style tags come from in AEM? I haven't been able to find where these would be set and I've been testing with a small image/etc. However, everything I add in with cause the width to expand to the full page.

<div data-type="Editable" data-path="/content/aem/test_component" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget" title="Carousel - Video Slide" style="top: 12px; left: 0px; width: 1365px; height: 118.781px;"><span title="Carousel - Video Slide" class="cq-Overlay--component-name">Carousel - Video Slide</span></div>

<div data-type="Editable" data-path="/content/aem/test_component" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget is-selected is-active" title="Carousel - Image Form Slide" style="top: 22px; left: 814.375px; width: 382.188px; height: 400.109px;"><span title="Carousel - Image Form Slide" class="cq-Overlay--component-name">Carousel - Image Form Slide</span></div>

Let me know if you have any suggestions.

Thank you.

Brendan

1 Accepted Solution

Avatar

Correct answer by
Level 4

Turns out there was custom css that I couldn't see unless I hit preview mode. This css was coming from the component another member of my team created.

For anyone else who might be wondering something like this - check to see if your components have custom CSS in their clientlibs

View solution in original post

1 Reply

Avatar

Correct answer by
Level 4

Turns out there was custom css that I couldn't see unless I hit preview mode. This css was coming from the component another member of my team created.

For anyone else who might be wondering something like this - check to see if your components have custom CSS in their clientlibs