Parsys displays with 0 width

[JoseBerciano]

Hi everyone, I am struggling a bit with this issue, hopefully someone can give a hand.

So I created a component that displays 2 columns with a parsys on each one of them. For some reason these parsys are being displayed with 0 width:

When I inspect the generated HTML for the component I can see this:

cq5 adds a <div class="cq-placeholder-etc-etc-etc"></div> with the actual parsys placeholder, though these elements have 0 width.

What it is even more odd, if I edit the HTML with Chrome and remove that div, cq5 is rendering it again but now with the right width:

I have checked the differences between the previous generated parsys and the one after removing it effectively the only difference is the width https://www.diffchecker.com/leLvyQdR

Has any of you guys seen this before? Any advice on how to tackle this issue?

I am currently using CQ5 5.6.1, Java 1.7.0_79

KInd regards.

[smacdonald2008]

I am looking into this issue. I will post back findings. 

[Lokesh_Shivalingaiah]

I think there would be some CSS conflict or the div issue in the column ctrl component. Essentially this should not be the case.

Can you try out of the box column control component and see if you still face the same issue.

[JoseBerciano · Accepted solution]

Thanks smacdonald2008 and bsloki for your help, really appreciated.

I discovered the issue was effectively specific to the css created for those pages as I tested my component in a different project and worked just fine.

I could not figure out which css property was the one breaking the placeholder layout, but after 3 exhausting days I considered this work around good enough to fix the issue:

.row .column .parsys, .row .column .parsys div{ width: 100%; }

Cheers.