[solved] Custom form templating issues

[aijosh]

I need to place elements side by side.

1 | 5
2 | 6
3 | 7
4 | 8

<div class="row-fluid">
<div class="span6">
element 1,2,3 & 4
</div>
<div class="span6">
element 5,6,7 & 8
</div>
</div>

Option 1:
change element ordering in fabrik form's list to 1,5,2,6,3,7,4,8 and use float:left;
Issue:
when on mobile, the ordering doesn't make sense since its shown 1s
1
5
2
6
3
7
4
8

Option 2:
create custom template (allow elements to be automatically generated in foreach)
Issue:
the elements re generated in 'foreach'. I wouldn't know how to break them into two columns ​

Option 3:
create custom template( manually generate elements)
Issue:
was already through with this when I found out the elements didn't generate all the necessary content required for the form to work. no id's e.t.c. form's javascript also not working.

Any suggestion?​

 

[troester]

Edit: easier way

Create two groups, for elements 1-4, 2-8
This will give you 2 div with id=groupX

Then you can add CSS to put the DIVs side by side (float or flex) resp. one after the other for mobile (with mediaqueries).
Or create a custom template to output the groups by adding e.g. span6 (in default.php split the groups' foreach)

If you want to have the complete form functionality you must keep the "Fabrik structure" (div containers, ids, classes, attributes etc).

 

[aijosh]

Thanks,

I actually initially attempted this. But I already have so many list and list joins I'm a little wary of messing up stuff.
I did create another group (ListB section1) then tried to copy the first 4 elements of List B into this group. At this point I was getting a message that the elements already exist with the option to rename the elements. So I stopped here. Cos I believe renaming the elements would break the relationships between the elements and also the form (I don't know the inner working of that yet and was not willing to risk it)

I was able to use your first suggestion and I think I prefer that. Worked seamlessly (finished in less than 15mins). Wish I knew what exactly the foreach statements outputted, it would have saved me the whole night I tried getting this to work.