x-editable popover not shown completely

Question

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

Cherriecherrita

some code? your fiddle doesn't work – Airdrome

I have added the code and fixed the fiddle. – Cherriecherrita

Answer 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.

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/

Airdrome

Thanks a lot for the quick and explained answer. Second option is working fine. First is also working but if I click on another div first one is not collapse/hide(I have several collapsible divs). – Cherriecherrita

Both are working although overflow: visible; seems to be ruining my table on mobile. Thanks man. – Singleness

Answer 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.

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

Edit:

Just add that container option..

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

Overact

Thanks for the reply. Can you please provide a working jsfiddle, it is very helpful. – Cherriecherrita

This is working in bootstrap v2 version of x-editable. Thanks – Billings

container: 'body' fixed it for me, without it the buttons and form fields were not sitting on one line. – Vigilante

this should be the answer ! Someone read the documentation thoroughly ! Thanks – Multiform

This was perfect, and really should have been in their documentation. For complex projects that have dynamic elements, this tidbit, as a default, is...a life saver! – Nickola

thanks, and agree with last comment, I can't see that option in the documentation! – Intoxicating

This should be the right answer ! You can also perform this by adding a data attribute into the field it self : data-container="body" . – Ignorance

This is the perfect solution @Overact – Unfurl