Group Layout Column Widths problems

[chris.paschen]

I've been trying to follow the method shown here:
http://fabrikar.com/forums/index.ph...can-element-span-over-multiple-columns.28533/

to have different column widths for different elements/rows.
However, I can't get it to work.
Although I'm using Gantry 5 for template, I've been testing in Protostar (fluid layout) with same results.
(Joomla 3.6.5, Fabrik 3.5.2 - with latest github updated as of 2017-02-02)

I have 14 elements.
I have the group layout set to 4 columns.
I have the column widths set to: 25%,25%,40%,0%,40%,40%,0%,0%,90%,0%,0%,0%,20%,20%,20%,20%,20%,20%,50%,0%

However, everything is still being displayed in the standard 4-column layout.

To try to 'calculate' the percentages needed, I created this 'plan':

FIELDS ROW 1: meeting_date,patrol,patrol_guides,-blank-
LAYOUT ROW 1: 20%,25%,40%,0%,
FIELDS ROW 2: lesson_plan_ID,meeting_topic,-blank-,-blank-
LAYOUT ROW 2: 40%,40%,0%,0%,
FIELDS ROW 3: leaf_instructions. -blank-, -blank-, -blank-
LAYOUT ROW 3: 90%,0%,0%,0%,
FIELDS ROW 4: heritage,hobbies,life_skills,outdoor_activities
LAYOUT ROW 4: 20%,20%,20%,20%,
FIELDS ROW 5: pioneering_skills,science_technology,values,meeting_type
LAYOUT ROW 5: 20%,20%,50%,0%

WHICH led to a layout of:
25%,25%,40%,0%,40%,40%,0%,0%,90%,0%,0%,0%,20%,20%,20%,20%,20%,20%,50%,0%

If I change the first to values to "20%", then the layout does make them 20%; however, in row 2 the 40% seems to have no effect on the elements, they are just displayed within the normal 4-column grid.
And the "0%" entries just seem to push the next fields down to the next row with the div class getting a 'span0' added to it (and it is indented).

Am I just not understanding how these percentages are supposed to work?

It would be really helpful to have some docs on how to use the Column Widths to create a decent layout.
Also, how to the individual element layouts impact the group layout (element widths take priority?

 

[troester]

The thread you mention is from Fabrik2 and totally outdated.

If you set 4 columns you'll get 4 elements in one "row-fluid", the element container floating with spanX, the next 4 elements starting with a new row.
As far as I can see % settings are converted to spanX (so 50% ->span6, 10% ->span1 ..., I didn't test how it's rounded, so better set 6,4,2 directly for the span size )
You can't set more values than columns.

If your span sizes are > 12 your elements will float and display in two "rows" ( one row-fluid div), but the elements in the 2nd "row" will be missaligned because of
.row-fluid [class*="span"]:first-child {margin-left: 0;}

So you have to add custom CSS (every element container has a class fb_el_your-element-name which you can use to set custom CSS)
or create a custom template to put your elements
or maybe you can add a fabrik-bootstrap-grid jlayout override for
components\com_fabrik\layouts\fabrik-bootstrap-grid.php

 

[chris.paschen]

Thanks.
I was able to do it with just a bit of CSS and now everything looks very "pretty"

 

[cheesegrits]

Would you like to share the CSS, for anyone stumbling across this thread?

-- hugh

 

[Barcellos]

Would you like to share the CSS, for anyone stumbling across this thread?

-- hugh

It would be very useful

 

[Barcellos]

Guys, it works when I use @troester suggestion: 2,6,1,2 etc
However it doesnt work in the case of repeatable groups. Actually, I can't even set the number of the columns in a repeatable group. Is there any way to make it work?