x-editable popover没有完全显示。

I am using x-editable js. My x-editable popover is not shown completely.

我使用的是x-editable js。我的x-editable弹窗没有完全显示出来。

I think problem in z-index, I tried it on hyperlink but no luck.

我认为z指数的问题，我在超链接上试过但没有运气。

<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

演示小提琴

2 个解决方案

#1

Hi the problem is that the tootltip is inside a table and with position:absolute so he was searching for his closest parent with position:relative to be positioned.

嗨，问题是，tootltip是在一个桌子和一个位置:绝对，所以他在寻找他的最近的父母与位置:相对的位置。

The parent that he finds is the div with class .collapse. And this class has the property

他发现的父类是带有类的div。这个类有属性。

overflow:hidden;

You have two solutions with css.

你有两个css解决方案。

One type this in your css. Enables the view of the overflow in the div.

一个在你的css中。支持div中溢出的视图。

div.collapse {
 overflow:visible;
}

Two type this in your css. Remove this div as the relative parent.

两种类型在你的css中。将此div删除为相对父类。

div.collapse {
 position:static;
}

Your Fiddle http://jsfiddle.net/kGQ2R/6/

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

#2

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.

X-editable是基于Bootstrap的Popover插件，所以在您的.editable()设置(或任何不在您的溢出:隐藏元素的其他容器)中添加容器:“body”，也将解决这个问题。

This will most likely only work with the Bootstrap version of X-editable but I haven't checked that.

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

Edit:

编辑:

Just add that container option..

只需添加容器选项。

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

$(" #用户名”)。editable({container: 'body'， type: 'text'， pk: 1, url: '/post'，标题:'Enter username'});