Adobe Experience Manager Sites & More

Report · 10/15/15

Hi ,

I encounter a problem with CQ5 "column control" component. I draged the "2 columns" component from sidekick to my page,

however my page didn't divide into 2 columns but 2 rows(see attached png file).

I've googled but no help, can anyone kindly tell me how to use this component in detail?

code:

<html>

<body>

<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<cq:include path="par" resourceType="foundation/components/parsys"/>

</body>

</html>

gcarlino · 10/15/15

Hi

This is a bug. I noticed once that when you drag and drop the 2 columns from sidekick, the layout property is wrong for some reason.

With CRXDE Lite, you can see that the layout property of the colctrl get set to 2;cq-colctrl-lt0

If you set it to 2;colctrl-2c instead, it should display two columns.

View solution in original post

shekhardhiman · 10/15/15

Hi there,

Please see if the below forum threads help;

Column control is not properly working

Overriding the Column Control [/libs/foundation/components/parsys]

Column Control - Column Layout has no values

Column Control -> Rows not Column

Thanks!

varuns46785756 · 10/15/15

Wu Richard wrote...

Hi ,

I encounter a problem with CQ5 "column control" component. I draged the "2 columns" component from sidekick to my page,

however my page didn't divide into 2 columns but 2 rows(see attached png file).

I've googled but no help, can anyone kindly tell me how to use this component in detail?

code:

<html>

<head><title>test</title></head>

<body>

<cq:include script="/libs/wcm/core/components/init/init.jsp"/> <cq:include path="par" resourceType="foundation/components/parsys"/>

</body>

</html>

Hi,

Column control component is working on colctrl.css only.If you want to use or divide your component in two parts then the same layout combination should be present inside your local colctrl.css file.Put the colctrl.css file inside your clientlibs with all the required combinations. for example. for 2 column control layout inside your local css file is:

/* layout 0 : 50% 50% */
div.cq-colctrl-lt0 { }
div.cq-colctrl-lt0-c0 { width: 50%; }
div.cq-colctrl-lt0-c1 { width: 50%; }

gcarlino · 10/15/15

Hi

This is a bug. I noticed once that when you drag and drop the 2 columns from sidekick, the layout property is wrong for some reason.

With CRXDE Lite, you can see that the layout property of the colctrl get set to 2;cq-colctrl-lt0

If you set it to 2;colctrl-2c instead, it should display two columns.

Report · 10/15/15

I set the property as you said but no luck

[img]crd.png[/img]

==============================

[img]2rows.png[/img]

=========================== code:

Report · 10/15/15

thank you very much for reply. But where to reset the property in CRXDE lite? I'm new to AEM/CQ5 , please kindly give more in detail.

Sham_HC · 10/15/15

richard.wu wrote...

thank you very much for reply. But where to reset the property in CRXDE lite? I'm new to AEM/CQ5 , please kindly give more in detail.

Go to http://<host>:<port>/crx/de/
Login as admin
From navigation tree go to location of page Ex:- /content/.......
Under the page you would see jcr:content/par
Under par you need to select column layout component. Assuming you do not have other column components the name would be colctrl_0.
Once you identified column control component you would see a property layout and modify that value by double clicking it.
in short path would be /content/<page path location>/jcr:content/par/colctrl_0

Thanks,

Sham

Twitter: adobe_sham

varuns46785756 · 10/15/15

For column control component you can create one style sheet for all the combinations( like 2col or 3 col) and put inside your local directory.

Steps to use column control:

Once you selected column control from sidekick and once the page reloads, you should see your new Column Control on the page. Select the edit design button on the sidekick to configure the column. Now you should see two entries in design mode. Select edit next to ‘Design of colctrl’ to edit the design of the column control.The design for the Column Control has only one field. The Allowed Formats controls what options will be available for authors for using the column control. Each format is separated by a new line and the various fields are separated by characters.

Regards,

Varun

MatheusBarreto · 12/8/16

I've got this problem recently working with AEM 6.0 and every page Google could show me had people with the same problems, the same vague or documentation pointing answers and not one simple and detailed solution.

I was able to solve it after some head burning, so, here it goes:

- To avoid problems, I've coppied the colctrl component node from /content/geometrixx/en/jcr:content/par, along with the break and end nodes related to that component to my /content/myproject/mypage/jcr:content/par path. Surprisingly, It landed exactly where I'd wanted it, maybe because I've already dragged and dropped one of the Geometrixx Column Control component there earlier trying to make it work OOTB and then deleted it (there was no colctrl node on my /par node in JCR before copying the Geometrixx one, I've deleted then all);

- I've coppied the column control css lines from /etc/designs/geometrixx/static.css code to my project css file;

- After doing this, I've got the same result every one gets: two lines, one above other, not columns. Here's the solution: in my css file, specific on the lines about the columns with the design I've setted in design mode on my page (div.cq-colctrl-lt0-c0 and div.cq-colctrl-lt0-c1 identifiers); I've added "float: left" and "float: right", respectively.

- Now I've got two columns. Probably gonna have some work writting css rules about the responsitivity of this but I think this is part of the job. So, that's it folks. How to make a native and out of the box feature that doesn't work to do by writting code, rules and copying nodes in what should be a simple thing.

Maybe there is an easier and more straigh-foward way and I do believe that a lot of more qualified than me people posted it in some of these posts, but I couldn't make any of that work or follow their tips and help and considering the ammount of topics without answers, I believe I was not the only one. Hope it helps people that got this problem nowadays and search for it on Google. Sorry for any typos or incorrect spelling, not my native language.

Adobe Experience Manager Sites & More

CQ5 "column control" component not work, columns come out in different rows

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe