How to make fieldset side by side on form

[Bren]

Hello all.
I've been playing with a new form template that I would like 2 fieldsets of elements to be side by side on my form page. Currently, all of my elements in the default bootstrap template list from left to right and continue down the page (depending on the screen size). I read at the end of the following older Fabrik forum thread that fieldsets = groups; but I'm not sure how to arrange the page with 2 fieldsets side by side on the same page, via CSS in my custom Fabrik form template.
http://fabrikar.com/forums/index.php?threads/custom-form-template-based-on-bootstrap.38865/

Is there any suggestions that anyone can share with me?
Thanks in advance.

 

[juuser]

1) Make a copy of the bootstrap template;
2) Wrap the fieldset inside a div and add some specific class to it;
3) Set the divs width to 50% and not to wrap using some generic css in custom.css file in template's folder.

 

[troester]

You can do it also with custom CSS only. Use your browser console to examine HTML tags, ids, CSS classes.

Add something like (I'd use a width <50% because sometimes depending on browser, padding,... 2x50% won't fit into 100%)

fieldset#group44.fabrikGroup {width: 45%; float: left;}
fieldset#group45.fabrikGroup { width: 45%;clear: none;}

http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/

 

[Bren]

Thanks for the tips guys. I just tried your suggestion, Troester, and it looks great.
How would I wrap each group/fieldset with a border line that has the group label on it above each group/fieldset?
Thanks in advance.

 

[Bren]

Friendly bump.
Thanks in advance.

 

[troester]

Add CSS for fieldset and legend.
To get the legend inside the fieldset it seems you must add float:left to the legend (otherwise it's always overlaying the top border).

 

[Bren]

Hi Troester.
Ok. So, for example, like this?
fieldset#group44.fabrikGroup.legend {float: left;}
Thanks in advance.

 

[troester]

You can test any CSS in your browser console on the fly.
It would be
fieldset#group44.fabrikGroup .legend {float: left;} (space before .legend)

 

[Bren]

Thanks again, Troester.
1 last thing that I haven’t been able to make work playing with CSS, is getting 3 fieldsets to work side by side. Anymore CSS suggestions to make that work?
Thanks in advance.

 

[troester]

Add width, float, clear to all three groups as you need.

 

[Bren]

Ok, so, I did the following to make these 3 fieldsets/groups side-by-side in the same row and it worked!
fieldset#group91.fabrikGroup {width: 30%; float: left;clear: none;}
fieldset#group92.fabrikGroup {width: 30%; float: left;clear: none;}
fieldset#group93.fabrikGroup {width: 30%; float: left;clear: none;}

Thanks Troester. I appreciate it.

 

[Bren]

The only issue I still have is that I can't get any of the fieldset/group Legends to ever display. I noticed that my cloned bootstrap form template has "if ($group->showLegend) :?>" within the default.php file. I have text within each groups Label settings; but I still don't see the Legends/Group Labels. Is there an option somewhere in Fabrik that I'm missing?
Thank in advance.

 

[Bren]

Actually, I just figured it out. I looked at the bootstrap tabs template and noticed that the default template was missing the following. So, I added it and now I have my group labels.

<legend class="legend"><?php echo $group->title;?></legend>

So, anyway, all is well. Thanks again, Troester.