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
Solved! Go to Solution.
Views
Replies
Total Likes
Looks like the CSS is not being pulled in. Here is an older community thread that talks about this..
Views
Replies
Total Likes
What version of CQ are you using?
Views
Replies
Total Likes
CQ 5.4
Views
Replies
Total Likes
Looks like the CSS is not being pulled in. Here is an older community thread that talks about this..
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
ThankYou! :)
Any workaround till its released?
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies