x-editable popup does not display in correct position

Question

I am trying to use divs instead of a table, and allow the user to comment on each "row".

An example of my div structure is like this:

<div id="mytable">
<div id="line1" class="line preformatted">
    This is my whole entire line!
    <div id="popuplink">
        <a href="#" id="popup" aria-describedby="ui-tooltip-0" onclick="addComment(event)"><i class="icon-pencil"></i></a>
    </div>
</div>
</div>

With the editable being defined like so:

$('#popup').editable({
    toggle: 'manual',
    mode: 'popup',
    title: 'Enter comment',
    type: 'text',
    emptytext: '',
    placement: 'right',
    display: function(value, response) {
        return false;   //disable this method
    },
    success: function(response, newValue) {
        alert("success saving: " + newValue);
    }
});

And for some reason the x-editable popup will not display relative to the correct div, it keeps defaulting to the top left corner. How can I fix this?

see jsfiddle here: http://jsfiddle.net/H9Drf/7/

Edit: I think that the problem has to do with the id of "popup" being the same in each div. As in, if I click on the third line, and write something into the textbox and hit "Save", I can tell that the effect happened to the first line, which has the first occurrence of "id=popup". Still not sure where to go from here...

Answer 1

I got it to work once I gave the different x-editable items (the links inside the popuplink divs in my code) different IDs. See working solution at jsfiddle.net/H9Drf/9/

Answer 2

I am not sure that this will work everywhere but this should work on your example. The plugin that you are using is adding inline style

try adding this to your style sheet

 .editable-popup{top:-61px !important;left:245px !important;}

Answer 3

If you want popup to display relatively to '#line1', add this to css:

#line1 {
   position: relative;
}

Answer 4

I had this problem and it turns out I was not including the correct jquery-ui css. Changing the css version to match the ui version fixed it.