10

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?

riddle_me_this
  • 8,575
  • 10
  • 55
  • 80
Bhushan Gadekar
  • 13,485
  • 21
  • 82
  • 131
  • I'm having the same issue. I get an error when trying to use it with it: `bootstrap editible null not found. Have you included corresponding js file?` – Andrew Newby Nov 16 '16 at 16:50
  • Ah actually, I got it kinda working - but the toottip is broken (weird styling). The issue I had was not including tether.min.js. It still doesn't fix the overall issue though – Andrew Newby Nov 16 '16 at 17:03
  • I haven't tried it, but one alternative could be http://jinplace.org (I'm not affiliated with it in any way) – riddle_me_this Dec 07 '16 at 02:06

2 Answers2

2

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>' ;
user7346149
  • 21
  • 2
  • 3
    Welcome to Stack Overflow! While this piece of code may answer the question, it is better to include a description of what the problem was, and how your code will tackle the given problem. For the future, here is some information, [how to crack a awesome answer](http://stackoverflow.com/help/how-to-answer) on Stack Overflow. – dirtydanee Dec 27 '16 at 14:08
0

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>
bharti parmar
  • 394
  • 3
  • 12