Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Column control component not working in Geometrix media site But working in Geometrix Demo site

Raghava_Joijode
Level 3
Level 3

HI All, 

I added colctrl(Column control - Sightly) component in geometrixx-media site but it is not working , I am unable to see parsys between 'start of column' and 'end of column'

Please find the attached screenshots 

It is working finne as expected in demo site.

I have even included the below css in media site:


/* 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}

and below lines in design mode for dialog dropdown:

2;cq-colctrl-lt0    2 Columns (50%, 50%) 3;cq-colctrl-lt1    3 Columns (33%, 33%, 33%) 4;cq-colctrl-lt2    4 Columns (16%, 16%, 16%, 33%) 4;cq-colctrl-lt3    4 Columns (25%, 25%, 25%, 25%) 5;cq-colctrl-lt4    5 Columns (20%, 20%, 20%, 20%, 20%)
1 Accepted Solution
Lokesh_Shivalingaiah
Correct answer by
Community Advisor
Community Advisor

If you are using responsive grid, then you dont need column control. You can very well control the width of the responsive grid.

Both of them cannot co-exists. If you want column control, then use that with responsive grid.

View solution in original post

5 Replies
Lokesh_Shivalingaiah
Community Advisor
Community Advisor

Hi Raghava,

It should work if you add the column control in parsys. Let me know what is the error you are seeing.

 

Thanks,

Lokesh

Raghava_Joijode
Level 3
Level 3

Yes it worked when added in parsys, Is there any way to make it work when added in responsivegrid??

Lokesh_Shivalingaiah
Correct answer by
Community Advisor
Community Advisor

If you are using responsive grid, then you dont need column control. You can very well control the width of the responsive grid.

Both of them cannot co-exists. If you want column control, then use that with responsive grid.

View solution in original post

kautuk_sahni
Employee
Employee

As mentioned by Lokesh, If you are using responsive grid, then we don't need column control.

As we can modify the width of the responsive grid. Both of them cannot co-exists. If you want column control, then use is with parsys.

~kautuk