x-editable popover not shown completely

Question

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

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/

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' });