x可编辑的popover未完全显示 [英] x-editable popover not shown completely

问题描述

我使用

解决方案

问题是，齿尖在表内，并且 position：absolute ，所以他正在搜索他最近的父项 position：relative 定位。

他发现的父类是 .collapse 类的div。此类具有属性

  overflow：hidden; 
  

您有两个解决方案与css。

一个在您的css中键入。启用div中溢出的视图。

  div.collapse {
 overflow：visible; 
} 
  

两个删除此div作为相对父元素。

  div.collapse {
 position：static; 
} 
  

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

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

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

<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

解决方案

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.

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

overflow:hidden;

You have two solutions with css.

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

div.collapse {
 overflow:visible;
}

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

div.collapse {
 position:static;
}

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

这篇关于x可编辑的popover未完全显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！