Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Component CSS Width Increasing Forever in Edit Mode

Avatar

Level 2

This question might be slightly confusing but here we go. In this questions we have two components. The first component is a container component consisting of a single column, single row table with a parsys in the cell and optional headers, hereinafter referred to as Container Component.

The second component is a custom table component we have created, hereinafter referred to as Table Component. The author chooses how many columns and rows the table contains and the component creates the HTML using these variables. Each cell contains a single parsys that allows the author to drag any other component into it, RTE for example. 

When the Table Component is added to the Container Component using the parsys, the Edit Config bar of the Container Component immediately begins increasing its pixel width forever. No other component makes the Container do this and adding the Table Component to other component's parsys does not give the same results.

The Container Component outlined code can be seen below:

<table> <thead> <tr> <c:if test="${headerRequired eq 'yes'}"> <th class="first">${properties.col1label}</th> <th class="second">${properties.col2label}</th> </c:if> </tr> </thead> <tbody> <tr> <td colspan="2"><cq:include path="eventspar" resourceType="foundation/components/parsys" /></td> </tr> </tbody> </table>

The basic Table Component code stucture can be seen below:

<table style="width:100%"> <thead> <c:if test="${includeHeaders eq true}"> <c:forEach var="i" begin="1" end="${numColumns}" varStatus="loop"> <cq:include path="column ${loop.index}" resourceType="foundation/components/parsys" /> </c:forEach> </c:if> </thead> <tbody> <c:forEach var="i" begin="1" end="${numRows}" varStatus="loop"> <tr> <c:forEach var="j" begin="1" end="${numColumns}" varStatus="loop"> <cq:include path="cell${i}${j}" resourceType="foundation/components/parsys" /> </c:forEach> </tr> </c:forEach> </tbody> </table>

I was thinking that it may be CQ5 getting confused with so many parsys components packed tightly together but I am not sure.

Any help would be appreciated.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Debug using firebug and check on the style (inspect element). It might happen with some tags overlapping etc...

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

Debug using firebug and check on the style (inspect element). It might happen with some tags overlapping etc...