x-editable popover未完全显示

Question

我正在使用x-editable js.我的x可编辑弹出窗口未完全显示.

我认为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

嗨问题是,tootltip在一张桌子里,position:absolute所以他正在寻找他最亲近的父母position:relative.

他找到的父母是带班级的div .collapse.这个班级有财产

overflow:hidden;

你有两个css解决方案.

在你的CSS中有一种类型.启用div中溢出的视图.

div.collapse {
 overflow:visible;
}

两个在你的CSS中输入这个.删除此div作为相对父级.

div.collapse {
 position:static;
}

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