x-editable 可调整大小的列无法正确显示输入

Question

我使用 bootstrap 3 并且有一个 bootstrap-table table with editable cells and resizable columns. For resizing I use extension bootstrap-table-resizable and for cells editing bootstrap-table-editable

当我不使用可调整大小的插件时，我可以编辑单元格并查看整个可编辑输入。

jsfiddle

当我使用可调整大小的插件时，只有部分可编辑输入是可见的。

jsfiddle

当我想编辑单元格时，我希望看到整个输入。我按照 this post 并尝试为可编辑插件设置 z-index, overflow 属性或 container: 'body'，但没有帮助。

Answer 1

不确定是否有任何本机方法，但这可以用作简单的解决方法。

想法是在检测到 .editable 元素上的点击事件时，设置相应（在给定索引上）<th> 元素的 width 样式：

$('.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);
    }
});

注:
$(this).next() 指向保存输入字段的 .editable-container span 元素和 ✔✖ 按钮。

---

然后使用editable的hidden事件将<th>的宽度重新设置为auto:

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

JSFiddle