CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4inline-editing
Bhushan Gadekar
Bhushan Gadekar

Reputation: 13805

x-editable in bootstrap 4?

I am currently exploring Bootstrap 4.

In Bootstrap 3, I had implemented inline editing using x-editable.

But for Bootstrap 4, I couldn't find how to implement inline editing.

Any suggestions?

Upvotes: 10

Views: 6964

Answers (2)

bharti parmar
bharti parmar

Reputation: 434

Editable field in bootstrap 4

I am using this .contenteditable function for making table editable or non-editable.

<tr>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td>
    <span class="table-remove"><button type="button" class="btn btn-danger">Remove</button></span>
  </td>
</tr>

And For make form editable or non-editable i am using .readyonly function inside the input field.

<tr>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello1" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello2" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello3" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello4" autocomplete="none"></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello5" autocomplete="none"></td>
</tr>

Upvotes: 0

user7346149
user7346149

Reputation: 21

Works for me with this trick:

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="fa fa-fw fa-check"></i></button>' + '<button type="button" class="btn editable-cancel"><i class="fa fa-fw fa-remove"></i></button>' ;

Upvotes: 2

Related Questions