Question

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

enter image description here

我认为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来定位。

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

overflow:hidden;

你有两个css解决方案。

一个在您的CSS中输入此内容。启用div中溢出的视图。

div.collapse {
 overflow:visible;
}

两个在您的CSS中输入此内容。将此div删除为相对父级。

div.collapse {
 position:static;
}

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

x-editable popover未完全显示

2 个答案: