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

wesyah234 · July 23, 2015, 2:29pm

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:

github.com

Meteor-Community-Packages/meteor-autoform/blob/8544c659ea5235bbbc9f737e170d405c11e23cac/templates/plain/components/afFormGroup/afFormGroup.html

<template name="afFormGroup_plain">
  <div class="{{#if afFieldIsInvalid name=this.name}}has-error{{/if}} {{afFormGroupClass}}" data-required={{required}} {{afFormGroupAtts}}>
    {{#unless this.skipLabel}}
    <label {{this.afFieldLabelAtts}}>{{#if this.labelText}}{{this.labelText}}{{else}}{{afFieldLabelText name=this.name}}{{/if}}</label>
    {{/unless}}
    {{> afFieldInput this.afFieldInputAtts}}
    <span>{{{afFieldMessage name=this.name}}}</span>
  </div>
</template>

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

shock · July 23, 2015, 3:47pm

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

ajaxsoap · July 23, 2015, 4:09pm

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.

wesyah234 · July 23, 2015, 4:28pm

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!

wesyah234 · July 28, 2015, 6:48pm

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.

gkimothi · April 21, 2016, 7:57pm

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?

ralof · June 21, 2016, 10:35pm

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