column width ignored when more than 6 columns

[bea]

Hi,
I run into an issue with setting my column width for 7 columns. Everything is displayed well with 6 columns, but with 7 it's ignoring my width settings (also if I left the field empty).
How I can get my own column settings? I have up to 10 columns in a form

Cheers,
Bianka

 

[jfquestiaux]

Well, you probably use the Bootstrap template, and it uses the 12 columns grid system of Bootstrap, so I think 6 is the maximum you can have.
If you really need 10 columns, you'll have to design your own template.
Be aware though that one main advantage of Joomla 3/Fabrik 3 is the compatibility with mobile devices. I don't know how your 10 columns will look on a smartphone...

 

[bea]

Hi,
I am absolutely not familiar with this Bootstrap system, but I guess, that 12 columns are possible. I have found this: General Info - framework for Joomla 3.x.
I make intranet site and mobile devices could link to smaller lists.
Cheers,
Bianka

 

[cheesegrits]

Yup, but I think we use 2 "columns" per element, one for label, one for data.

Not sure if going for the "labels above" option would help?

-- hugh

 

[bea]

Hi, I have tested the bootstrap template with labels above, but this doesn't work. Now I have copied the J2.5 labels-above template into the new j3.3 site and it looks much better.
I don't understand, why the bootstrap template ignores more than 6 elements... there is enough space...
Cheers,
Bianka

 

[cheesegrits]

There could well be something in the view code that imposes that limitation, and you just happen to be the first person to hit it, as very few people ever use more than 6 wide.

I'm looking now.

-- hugh

 

[cheesegrits]

I think the answer is probably somewhere in the setColumnCss() method, in the main group model (./components/com_fabrik/models/group.php) starting around line 411, where the numbers 6 and 12 seem to be of some significance. But I'm having a hard time understanding what is going on, and to be honest the pain meds aren't really helping!

Basically there seems to be some built in assumption that we limit to 6, but I'm not sure why, or how to change this.

Doesn't necessarily mean it can't be changed, as a lot of the Bootstrap related code got built in the early days of Bootstrap, while we were still building our understanding of it. Just means I don't feel comfortable enough with how it hangs together to start changing it just yet.

For now, if you can achieve what you need with a custom template, that's probably the way to go.

-- hugh

 

[rob]

Bootstrap grids as others have said are 12 columns wide, so working with values that divide easily within 12 is normally a good idea (1, 2, 3, 4, 6 12)

A row inside the grid, is split up by using <div class="spanX"> where X is the number of columns it should span.
If you just say you want 6 columns in the group we calculate what the average span size should be - so 12/6 = 2
Thus a row will have 6 <div class="span2"></div>

When going to 7 columns you have 12/7 = 1 (we always round down to avoid content spilling into the next row.
That will give you 7 <div class="span1"></div> which would then leave a blank space of 5 columns unused (12 - 7)

However, you can pad that out though using the 'Column widths' option. In the context of Fabrik 3.1+ this comma separated list of values refers not to pixels or percentages, but instead refers to the X in the spanX class.

So if you fill out this field with the values "3,2,1,1,1,2,2" your 7 column grid's html will look like this:

<div class="row-fluid">
<div class="span3"> ....</div>
<div class="span2"> ....</div>
<div class="span1"> ....</div>
<div class="span1"> ....</div>
<div class="span1"> ....</div>
<div class="span2"> ....</div>
<div class="span2"> ....</div>
</div>