Editable cell doesn't overlap neighbour cells in bootstrap table

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, which uses x-editable.

Editable cell (textarea with buttons) doesn't overlap neighbour cells. I tried to set z-index for editable component, but it didn't help.

jsfiddle

html

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
    <thead>
    <tr>
        <th data-field="name" >Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count" >Forks</th>
        <th data-field="description" >Description</th>
    </tr>
    </thead>
</table>

javascript

$.fn.editable.defaults.mode = 'inline';

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data,
  resizable: true
});

$('tr td').editable({
    type: 'textarea',
    showbuttons: true
});

Answer 1

I forgot to add position: relative. Now it works.

.editable-input,
.editable-buttons button{
  position: relative;
}