问题
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?
回答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!
来源:https://stackoverflow.com/questions/33022900/how-can-i-use-bootstraps-grid-columns-to-set-the-width-of-x-editable-inputs