I am using x-editable js. My x-editable popover is not shown completely.
I think problem in z-index, I tried it on hyperlink but no luck.
<script type="text/javascript">
$(function () {
$('.extraSectionTitle').editable({
success: function (response, newValue) {
if (response.status == 'error') {
return response.msg;
}
}
});
$('.extraSectionDescription').editable({
success: function (response, newValue) {
if (response.status == 'error') {
return response.msg;
}
}
});
});
</script>
<div class="row-fluid">
<div class="span7">
<div class="accordion-body collapse in">
<div class="row-fluid" id="myDiv">
<div class="box box-color box-bordered">
<div class="box-title">
<h3><i class="icon-th-list"></i> Hi</h3>
</div>
<div class="box-content nopadding">
<table class="table table-hover table-nomargin table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="editable editable-click extraSectionTitle" data-original-title="Edit Title" data-pk="1" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Title">ASD ASD ASD ASD ASD </a>
</td>
<td>
<a class="editable editable-click extraSectionDescription" data-original-title="Edit Description" data-pk="${extra?.id}" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Description">DSA DSA DSA DSA DSA </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="span5">
<div class="box box-color box-bordered">
<div class="box-title">
<h3><i class="icon-th-list"></i> Hi</h3>
</div>
<div class="box-content nopadding">Hello Hi Hello Hi Hello Hi</div>
</div>
</div>
</div>
I know this is somewhat of a late reply, but I was just struggling with this issue and solved it in a different way which may help other people.
X-editable is based on Bootstrap's Popover plugin, so adding container: 'body'
to your .editable()
settings (or any other container that is not within your overflow:hidden
element) will also fix this problem.
This will most likely only work with the Bootstrap version of X-editable but I haven't checked that.
Edit:
Just add that container option..
$('#username').editable({
container: 'body',
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});