Column control is not properly working

[ragamgnair]

Hi,

I am trying to use column control. I copied the parsys component from /libs/foundation/components/parsys to my app folder /apps/cogni/components/parsys.allowed formats as 

2;cq-colctrl-lt0 2 Columns (70%, 30%) 2;cq-colctrl-lt1 2 Columns (30%, 70%) 2;cq-colctrl-lt2 2 Columns (50%, 50%) 3;cq-colctrl-lt3 3 Columns (33%, 33%, 33%) 3;cq-colctrl-lt4 3 Columns (50%, 25%, 25%)

in the static.css in the design folder of app i gave 

/* column control layouts */
div.cq-colctrl-cols {width: 100%; float: left; }
 
div.cq-colctrl-default { width: 100%;}
 
/* layout 0 : 50% 50% ( grid6 + grid6 ) */
div.cq-colctrl-lt0 { }
div.cq-colctrl-lt0-c0 { width: 340px; margin-right:10px}
div.cq-colctrl-lt0-c1 { width: 340px; margin-left: 10px}
 
/* layout 1 : 33% 33% 33%( grid4 + grid4 + grid4 ) */
div.cq-colctrl-lt1 { }
div.cq-colctrl-lt1-c0 { width: 220px; margin-right: 10px;}
div.cq-colctrl-lt1-c1 { width: 220px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt1-c2 { width: 220px; margin-left: 10px; }
 
/* layout 2: 16% 16% 16% 33% ( grid2.6 + grid2.6 + grid2.6 + grid4 ) */
div.cq-colctrl-lt2 { }
div.cq-colctrl-lt2-c0 { width: 140px; margin-right: 10px;}
div.cq-colctrl-lt2-c1 { width: 140px; margin-left: 10px; margin-right: 10px}
div.cq-colctrl-lt2-c2 { width: 140px; margin-left: 10px; margin-right: 10px}
div.cq-colctrl-lt2-c3 { width: 220px; margin-left: 10px }
 
/* layout 3: 4 x 25% ( grid3 + grid3 + grid3 + grid3 ) */
div.cq-colctrl-lt3 { }
div.cq-colctrl-lt3-c0 { width: 160px; margin-right: 10px;}
div.cq-colctrl-lt3-c1 { width: 160px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt3-c2 { width: 160px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt3-c3 { width: 160px; margin-left: 10px; }
 
/* layout 4: 5 x 20% ( grid2.5 + grid2.5 + grid2.5 + grid2.5 + grid2.5 ) */
div.cq-colctrl-lt4 { }
div.cq-colctrl-lt4-c0 { width: 124px; margin-right: 10px;}
div.cq-colctrl-lt4-c1 { width: 124px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt4-c2 { width: 124px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt4-c3 { width: 124px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt4-c4 { width: 124px; margin-left: 10px; }
 
/* widepage layouts */
 
/* layout 5 : 50% 50% ( grid8 + grid8 ) */
div.cq-colctrl-lt5 { }
div.cq-colctrl-lt5-c0 { width: 460px; margin-right:10px}
div.cq-colctrl-lt5-c1 { width: 460px; margin-left: 10px}
 
/* layout 6 : 25% 25% ( grid4 + grid4 + grid4 + grid4) */
div.cq-colctrl-lt6 { }
div.cq-colctrl-lt6-c0 { width: 220px; margin-right:10px}
div.cq-colctrl-lt6-c1 { width: 220px; margin-left: 10px; margin-right:10px}
div.cq-colctrl-lt6-c2 { width: 220px; margin-left: 10px; margin-right:10px}
div.cq-colctrl-lt6-c3 { width: 220px; margin-left: 10px}

But in the page its not showing as column.if i select 2 column format it will show 2 rows instead of columns.

PFA.

Can u please help me to resolve this

Thanks,

Ragam

[smacdonald2008]

What version of CQ are you using?

[ragamgnair]

CQ 5.4

[smacdonald2008 · Accepted solution]

Looks like the CSS is not being pulled in. Here is an older community thread that talks about this..

https://forums.adobe.com/message/4325040

[sonalik83665772]

Hello,

Was this issue resolved?

I am trying to do the exact same thing so as to have components displayed 50% 50% but they would appear vertically in rows and not side by side as expected.Looks like some issues in pulling the css styles.

I am using the exact same styles.Could anyone guide how this was resolved?

[smacdonald2008]

Look at Justin's comments on this in the older thread. 

2nd - we are writing a new column component article to be released soon. I will update this thread when it's done. 

[sonalik83665772]

ThankYou! 🙂

Any workaround till its released?

[smacdonald2008]

I will work hard to get this written -  most problems are CSS related. 

Here is the link to the article introduction:

http://scottsdigitalcommunity.blogspot.ca/2015/07/creating-adobe-experience-manager.html