CQ5 "column control" component not work, columns come out in different rows | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

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

  • October 16, 2015
  • 8 replies
  • 2790 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by gcarlino

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.

8 replies

M
MatheusBarreto
New Participant
December 8, 2016

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.

varuns46785756
varuns46785756
New Participant
October 16, 2015

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
gcarlinoAccepted solution
Employee
October 16, 2015

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.

A
Anonymous
October 16, 2015

I set the property as you said but no lucksurprise

[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>

A
Anonymous
October 16, 2015

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
Sham_HC
New Participant
October 16, 2015

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
varuns46785756
New Participant
October 16, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...