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>
Solved! Go to Solution.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
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%; }
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
I set the property as you said but no luck
[img]crd.png[/img]
==============================
[img]2rows.png[/img]
=========================== code:
<html>
<head>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
</head>
<body>
<div class="container_16">
<cq:include path="par" resourceType="foundation/components/parsys"/>
</div>
</body>
</html>
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Thanks,
Sham
Twitter: adobe_sham
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Like
Replies