html - 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({
容器:' body '，
类型:'文本'，
克:1，
网址:'/帖子'，
title: '输入用户名'
});