Column Control -> Rows not Column

[#1]

Good afternoon.

Column control is generating vertical rows, instead of columns (See attached image).

Assume that the column selector only has 1 column option to choose from. I have two stylesheets included in the application.
One for my normal design, and one for the column control. This is what my column control CSS looks like:

/* column control layouts */ div.cq-colctrl-cols {width: 100%; float: left; } div.cq-colctrl-default { width: 100%; } /* layout 3: 4 x 25% ( grid3 + grid3 + grid3 + grid3 ) */ div.cq-colctrl-lt3 { } div.cq-colctrl-lt3-c0 { width: 75px; margin-right: 10px;} div.cq-colctrl-lt3-c1 { width: 75px; margin-left: 10px; margin-right: 10px;} div.cq-colctrl-lt3-c2 { width: 75px; margin-left: 10px; margin-right: 10px;} div.cq-colctrl-lt3-c3 { width: 75px; margin-left: 10px; }

The standard answer I have found is to simply copy over the static.css file
from the geometrixx demo.

But I want to understand which specific styles resolves this issue.

Kind regards
Toby
 

[#2 · Accepted solution]

As you correctly pointed out - the styles are specified in the CSS that ship with the Column control located here:

/libs/foundation/components/parsys/colctrl

My advice would be to overlay this component and experiment with the CSS styles. 

http://dev.day.com/docs/en/cq/current/getting_started/first_steps_for_developers.html

There are quite a few CSS Selectors that play a role in the Column component. If you are not referencing them properly - the column control appears as rows. 

[#3]

Hi smacdonald.

Based on the source code, I should have the required styles in my CSS.
parsys_column being most prominent on the column divs:
<div class="parsys_column <%= par.getBaseCssClass()%>">

I think I know what the problem is though.
This is the style that its trying to assign to the column DIV's:
cq-colctrl-lt3 4 Columns (25%, 25%, 25%, 25%)-c1

So instead of rendering the class for the DIV as "cq-colctrl-lt3-c1"
it doesnt parse the tab and renders the class name as follows:
"cq-colctrl-lt3 4 Columns (25%, 25%, 25%, 25%)-c1"

The column layout editor has 3 values, number of columns, column class and the description.
Number of columns is seperated with a semicolon. And class and description with /t.

In the designer when creating the layout types,
its not possible to tab (switches focus to another element).

Therefore, I created my entries in notepad
and copied it over, including the tab spacing.

Havent been able to find where it parses the layouts yet.
But Im pretty sure its the /t thats giving me hassles.

Kind regards
Toby