使用可调整大小的列无法正确显示x可编辑输入

Question

我使用bootstrap 3并且有一个bootstrap-table表，其中包含可编辑单元格和可调整大小的列。要调整大小，我使用扩展程序bootstrap-table-resizable和单元格编辑bootstrap-table-editable

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

jsfiddle

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

jsfiddle

当我想编辑单元格时，我希望看到整个输入。我关注了this帖子并尝试设置z-index, overflow属性或container: 'body'以获取可编辑的插件，但它没有帮助。

Answer 1

不确定是否有任何原生方法，但这可能会被用作一个简单的解决方法。

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

$('.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 元素，该元素包含输入字段和✔ ✖按钮。

然后使用可编辑的hidden事件将<th>的宽度重新设置为auto：

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

JSFiddle