How do I customize the ember-bootstrap form.element so that the input uses a specific column size?

Question

I'm using ember-bootstrap and the following element:

<form.element @controlType="text" @label="First Name:" @property="firstName" />

which produces the following HTML

<div class="form-group row">
  <label class="col-sm-4 col-form-label" for="ember198-field">First Name</label>

  <div class="col-sm-10">
    <input id="ember198-field" class="form-control" type="text">
  </div>
</div>

How do I go about customizing the col-sm-10 in the enclosing <div> for the input element?

Answer 1

1. Note that Ember Bootstrap forms have three layouts:

   • horizontal
   • vertical
   • inline

   You seem to be using the default horizontal layout. A different layout may be more suitable to you.

   See:

   • https://www.ember-bootstrap.com/api/classes/Components.Form.html#property_formLayout
   • https://getbootstrap.com/docs/4.6/components/forms/#horizontal-form
   • https://getbootstrap.com/docs/4.6/components/forms/#inline-forms

2. If you are cool with the horizontal layout and simply want to tweak column sizes, use the @horizontalLabelGridClass argument on the form or on individual element. This will tweak the class on the <label> and the class on the sibling <div> will be adjusted accordingly.