One of my fields is wildly out of position on the form.

[dukedougal]

One of my fields is wildly out of position on the form.

• tcomb-form v0.8.
• react v0.14.

I have a checkbox and it is displayed on the right hand side of my form like so:

In the inspector it shows that the chedckbox has additional classnames that the other fields do not have, like so:

    const options = {
      disabled: disabled,
      help: disabled ? i18n.updatingMessage : null,
      config: {
        horizontal: {
      md: [2, 3],
      sm: [2, 3]        }
      },
      fields: {
        full_name: {
          label: i18n.form.full_name,
        },
        location: {
          label: i18n.form.location,
        },
        twitter: {
          label: i18n.form.twitter,
        },
        website: {
          label: i18n.form.website,
        },
        logging_optin: {
          label: i18n.form.logging_optin,
        },
        github: {
          label: i18n.form.github,
        },
        tweet_length_bio: {
          label: i18n.form.tweet_length_bio + ' (' + bio_length + ')',
          type: 'textarea',
        }
      }
    };

Here is the render method:

    return (
      <DocumentTitle title={i18n.title}>
        <Panel title={i18n.title}>
          {success}
          <form method="post" onSubmit={this.doSubmit} className="form-horizontal">
            <t.form.Form
              ref="form"
              type={Form}
              options={options}
              onChange={this.onChange}
              value={this.state.value}
              />
            <div className="form-group">
              <div className="col-md-2 ">
              </div>
              <div className="col-md-3 ">
                <Button type="primary" disabled={disabled}>{i18n.doUpdate}</Button>
              </div>
            </div>
          </form>
        </Panel>
      </DocumentTitle>
    );

[gcanti]

When defining horizontal rules, the sum of label-width and label-width must be equal to 12, the standard number of columns in Bootstrap:

const options = {
  config: {
    horizontal: {
      md: [label-width, input-width], // <= label-width + label-width === 12
      sm: [label-width, input-width]  // <= label-width + label-width === 12
    }
  }
  ...
}