x-editable inputs aren't shown properly with resizable columns

Question

I use bootstrap 3 and have a bootstrap-table table with editable cells and resizable columns. For resizing I use extension bootstrap-table-resizable and for cells editing bootstrap-table-editable

When I don't use resizable plugin I can edit cells and see whole editable input.

jsfiddle

When I use resizable plugin, only part of editable input is visible.

jsfiddle

When I want to edit cells, I would like to see the whole input. I followed this post and tried to set z-index, overflow properties or container: 'body' for editable plugin, but it didn't help.

Answer 1

Not sure if there's any native method, but this might be used as a simple workaround.

The idea is to set a width style of the corresponding (on given index) <th> element, when a click event on .editable element is detected:

$('.editable').click(function(){
    // change the <td> width only if it's less than '.editable-container' width
    if($(this).next().width() > $(this).closest('td').width()){
        $('th:eq('+$(this).closest('td').index()+')').css('width', $(this).next().width()+15);
    }
});

Note:
$(this).next() points to the .editable-container span element which holds the input field and ✔✖ buttons.

---

Then use editable's hidden event to reset the width of <th> again to auto:

$('.editable').on('hidden', function() {
    $('th:eq('+$(this).closest('td').index()+')').css('width', 'auto'); 
});

JSFiddle