Autoform: can I control the fields so they will display horizontally?


#1

I’m using autoform with the “plain” template:

{{#autoForm collection="Chart" id="updateChartAfForm" type="method-update" meteormethod="updateChartAf" template="plain"  doc=this }}

{{> afQuickField name='demographics.lastName'}} {{> afQuickField name='demographics.firstName'}} 

But, the last and first name are showing up vertically:

from my research, it seems the autoform is putting a div around each field…

I think this is the relevant code from the autoform library:

Does anyone know if I can get more control over the layout? I really need to be able to lay out many of my fields horizontally… I have too many fields to put them all vertical :smile:


#2

Is something stopping you from setting display: inline-block in css, or what is the problem here ?


#3

Hi @wesyah234,

Use this reference schema:

Schemas.Registrations = new SimpleSchema
    'participant':
            type: Object
            autoform:
                    afObjectField:
                            bodyClass: 'container-fluid row'
    'participant.firstname':
            type: String
            max: 60
            autoform:
                    afFormGroup:
                            'formgroup-class': 'col-sm-6'
    'participant.lastname':
            type: String
            max: 60
            autoform:
                    afFormGroup:
                            'formgroup-class': 'col-sm-6'

The css classes is a boostrap class. I think this is in coffee script but you can convert it to javascript.

Reference: Issue#869 - bottom comment from fknipp.


#4

Thanks @ajaxsoap! that is just what I needed… not sure about the bodyclass container-fluid row, as it works without that as well, but indeed, this is what I need to do!


#5

FWIW, I have found that you can also specify the class attribute in the afQuickField:

{> afQuickField formgroup-class="col-md-1" name='demographics.mi'}}

which I prefer over setting it in the SimpleSchema

This way of doing things is not specifically mentioned in the Autoform docs.


#6

I have the following form

<template name="insertProgramForm"> {{#autoForm collection="Programs" id="insertProgramForm" type="insert"}} {{> afQuickField name='name'}} {{> afQuickField name='exercise'}} {{> afQuickField name='rest'}} {{> afQuickField name='tempo'}} {{> afQuickField name='sets'}} {{> afQuickField name='reps'}} {{> afQuickField name='notes' rows=6}} <button type="submit" class="btn btn-primary">Insert</button> {{/autoForm}} </template>

I tried adding the formgroup-class to get the fields to display horizontally next to each other but no luck. Is there anything else needed?


#7

Bit late with the answer, but still - there no magic here if you add the ’ formgroup-class’ attribute to the quickfield it will add that class to the generated HTML

afQuickField will normally render just

- more stuff -

afQuickField formgroup-class=“myClass” will render

- more stuff -

So your myClass will decide the outcome