How to make angular-xeditable use bootstrap-3 form style?

Question

Here's the example: https://vitalets.github.io/angular-xeditable/#editable-form

There are several problems:

1. When editing, it puts input inside '<span>'
2. It doesn't add 'form-control' class

How to you make angular-xeditable work with bootstrap-3 form?

Answer 1

First, add 'e-class' attribute to editable-text element.

<p class="form-control-static" editable-text="user.name" e-name="name" e-class="form-control" onbeforesave="checkName($data)" e-required>{{ user.name || 'empty' }}</p>

Second, add css:

.form-group .editable-wrap {
    float: left;
    width: 100%;
}