Column Problems

[afrazita]

Hello All,

I am currently working to try and get the columns on my site to work correctly. I can get the columns component to work as long as it is split up 50% for both columns. I am working to try and get it split up differently like 70%/30% or any other way that I can. Any help would be appreciated!

[smacdonald2008]

According this AEM topic:

http://dev.day.com/docs/en/cq/current/wcm/default_components/editmode.html#Columns

the out of the box functionality is an even split 50-50%.

If you want to create columns with re-sizable columns - you can override the column comopnent. Or you can build your own re-sizable column component using a JQuery column component. For example:

http://quocity.com/colresizable/

http://jquer.in/responsive/resizable-columns/

Hope this helps

[Paul_McMahon · Accepted solution]

The layout of the columns is determined by the CSS of your site. The Geometrix Demo site only has evenly split columns in it's CSS. In order to get variations in the split of the column you need to do a couple of things (this list assumes you want to keep the 50/50 split):

ddd

1. Add CSS classes to your site's CSS to support that new split. Your CSS class names must follow the same patterns as the demo site's CSS - which means you will have a wrapper div around all the columns with what I'll call as base CSS class name - this can be anything you want it to be - for example in the Geometrix Demo they use cq-colctrl-lt0 for the two column base class. Then for column the div class name is created by adding a column number to the end of the base classname. The format of this column number is -c0 for the first column, -c1 for the second, and so on for all the columns. So if you look at the Geomettrix demo you see class names  cq-colctrl-lt0-c0 and  cq-colctrl-lt0-c1 for the two column control. So you might need CSS for mycolumnname, mycolumnname-c0, and mycolumnname-c1 where mycolumnname-c0 would apply the 70% width, and  mycolumnname-c1 would be the 30%. If you look at /etc/designs/geometrixx/static.css you can see the Geometrixx CSS classes starting on line 814 in the 5.6.1 version. 
2. The next step is to configure the column control component in design mode. 
   1. Go to a page with a column control on it
   2. Go into design mode
   3. Open the Design of colctrl Edit button
   4. You will see an Allowed Formats text box with a several lines. The format of these lines looks like NbrColumns:BaseCSSClass Descriptive Name where there is a tab between base CSS Class and Descriptive name. So in the Geometrixx demo you see entries like 2;cq-colctrl-lt0 2 Columns (50%, 50%) it might look like 2:mycolumnname 2 Columns (70-30)
   5. Save and you new column format should be available. 

It's critical that your CSS class names match the configuration in design mode and the pattern of the column numbers or the column will just stack. 

If you want your custom columns to be dragable you have to create a virtual column control component - look at /libs/foundation/components/parsys/colctrl/virtual for examples.