1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

How to make fieldset side by side on form

Discussion in 'Community' started by Bren, Apr 4, 2020.

  1. Bren

    Bren Member

    Level: Community
    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.
     
  2. juuser

    juuser Active Member

    Level: Community
    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.
     
  3. troester

    troester Well-Known Member Staff Member

    Level: Community
    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/
     
    marozen and juuser like this.
  4. Bren

    Bren Member

    Level: Community
    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.
     
  5. Bren

    Bren Member

    Level: Community
    Friendly bump.
    Thanks in advance.
     
  6. troester

    troester Well-Known Member Staff Member

    Level: Community
    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).
     
  7. Bren

    Bren Member

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

    troester Well-Known Member Staff Member

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

    Bren Member

    Level: Community
    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.
     
  10. troester

    troester Well-Known Member Staff Member

    Level: Community
    Add width, float, clear to all three groups as you need.
     
  11. Bren

    Bren Member

    Level: Community
    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.
     
    Last edited: Apr 12, 2020
  12. Bren

    Bren Member

    Level: Community
    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.
     
  13. Bren

    Bren Member

    Level: Community
    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.
    Code (Text):
    <legend class="legend"><?php echo $group->title;?></legend>
    So, anyway, all is well. Thanks again, Troester.
     

Share This Page