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
