Column control is not properly working

Forum|Forum|10 years ago
October 16, 2015
7 replies
1494 views

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

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 smacdonald2008

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

smacdonald2008

Level 10

What version of CQ are you using?

ragamgnairAuthor

Level 2

CQ 5.4

smacdonald2008Accepted solution

Level 10

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

S

sonalik83665772

Level 2

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

Level 10

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.

S

sonalik83665772

Level 2

ThankYou! :)

Any workaround till its released?

smacdonald2008

Level 10