Meteor Autoform input fields only take up half a line instead of entire lines

261 views Asked by At

I am create a user administration panel and my add user modal looks fine where each input takes up the entire line and the next input is on the next line. In my edit user modal the inputs only use up half a line. Has anyone seen this behavior before?

Add User template:

<template name="addUser">
  {{#autoForm id="addUser" type="method" meteormethod="createUserwRole" collection="Users" resetOnSuccess="true" validation="keyup" }}
  <fieldset>
        {{> afQuickField name="username" id="username" autocomplete="off"}}
        {{> afQuickField name="profile" id="profile" autocomplete="off"}}
        {{> afQuickField name="emails.$.address" id="emails" autocomplete="off"}}
        {{> afFormGroup name="roles" options=options type="select-checkbox" id="roles"}}
    <div>
      <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addUser">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
  </fieldset>
  {{/autoForm}}
</template>

Edit user template:

<template name="editUser">
    <div>
      {{#autoForm id="editUser" type="method-update" meteormethod="createUserwRole" collection="Users" resetOnSuccess="true" validation="keyup" }}
      <fieldset>
            {{> afQuickField name="username" id="username" autocomplete="off"}}
            {{> afQuickField name="profile" id="profile" autocomplete="off"}}
            {{> afQuickField name="emails.$.address" id="emails" autocomplete="off"}}
            {{> afFormGroup name="roles" options=options type="select-checkbox" id="roles"}}
        <div>
          <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editUser">Submit</button>
          <button type="reset" class="btn btn-default">Reset</button>
        </div>
      </fieldset>
      {{/autoForm}}
    </div>
</template>

Thanks

1

There are 1 answers

4
jackkav On BEST ANSWER

It could be because you got a div wrapping your edit form, but that is missing from your add form. If your divs have a default width that could explain it. I suggest making the html match if you want to replicate the layout.