x-editable popover 未完全显示

Question

我正在使用x-editable js。我的 x-editable popover 未完全显示。

我认为 z-index 有问题，我在超链接上尝试过，但没有运气。

<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>

DEMO FIDDLE

Answer 1

我知道这有点晚了，但我只是在努力解决这个问题，并以不同的方式解决了它，这可能会帮助其他人。

X-editable 基于 Bootstrap 的 Popover 插件，因此将 container: 'body' 添加到您的 .editable() 设置（或任何其他不在您的 overflow:hidden 元素中的容器）也可以解决此问题。

这很可能只适用于 X-editable 的 Bootstrap 版本，但我没有检查过。

编辑：

只需添加该容器选项..

$('#username').editable({ container: 'body', type: 'text', pk: 1, url: '/post', title: 'Enter username' });

Answer 2

您好，问题是提示在表格内并且带有position:absolute，所以他正在寻找最接近的父级position:relative 来定位。

他找到的父级是类.collapse 的div。而这个类有这个属性

overflow:hidden;

您有两个使用 css 的解决方案。

一个在你的 CSS 中输入。启用 div 中溢出的视图。

div.collapse {
 overflow:visible;
}

两个在你的 CSS 中输入。移除此 div 作为相对父级。

div.collapse {
 position:static;
}

你的小提琴http://jsfiddle.net/kGQ2R/6/