Column Control -> Rows not Column

Avatar

Avatar

Tboness

Avatar

Tboness

Tboness

15-10-2015

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
 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

15-10-2015

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. 

Answers (1)

Answers (1)

Avatar

Avatar

Tboness

Avatar

Tboness

Tboness

15-10-2015

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