How can I use bootstrap's grid columns to set the width of X-Editable inputs?

Question

I'm using angular-xeditable, the Angular flavor of X-Editable. I'm trying to adjust the input width using Bootstrap's grid column classes.

A similar question, x-editable - adjusting the width of input field, offers solutions that change the width using custom styles/classes, but I want to incorporate Bootstrap's grid system.

Bootstrap

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-4">
    <input type="text" class="form-control">
  </div>
</div>

col-xs-4 exists on the parent div, and not the input itself.

X-editable

X-Editable renders a structure of form:

<a>hidden</a>
<form>
  <div>
    <input/>
  </div>
</form>

and applies custom styling to the input.

Demo (JSFiddle)

I've created a fiddle to demonstrate the problem here: http://jsfiddle.net/NfPcH/10908/.

How can I incorporate Bootstrap's column grid widths with X-Editable?

Answer 1

There are several gotchas that I ran into, but I managed to find a solution.

First, we cannot use form-inline with Bootstrap's column grid system. To remove this, we must override the form template in X-Editable. We also need to add a configurable way to apply the bootstrap column class.

yourAppName.run(function(editableOptions, editableThemes) {
  editableOptions.theme = 'bs3';
  editableThemes.bs3.formTpl = '<form class="editable-wrap" role="form" ng-class="xformClass"></form>';
});

Because we removed form-inline, we cannot use X-Editable's built-in buttons. We can remove them by applying buttons="no" to the editable element.

Finally, we assign the form class in our controller (the caveat is that all inputs will have the same column count per scope):

$scope.xFormClass = "col-sm-12";

This gets us most of the way there, but there's some padding weirdness. This is because both the form and its parent have column classes. I hacked it out by adding the row class to the input's parent:

editableThemes.bs3.controlsTpl = '<div class="editable-controls form-group row" ng-class="{\'has-error\': $error}"></div>';

The updated fiddle is here: http://jsfiddle.net/NfPcH/10933/. Hope this helps!