X-editable datepicker popping up on the same spot all the time - how to have it pop up next to the actual date field?

Question

In using X-editable I am running into this issue where if I specify the datepicker field mode: "popup", I get the popup to show just fine... but now if I have a long table (vertically or horizontally), the further down (or right) the table I go, the worse it gets - this date/datetime picker popover pops up only at a specific position on the page (top left).

So if I have 50 records and I click on one of the bottoms ones to open up a date picker, I can't even see it pop up and have to assume that it has popped up, so I have to scroll all the way up to the top of the table to see it.

And it's even worse if I go far right in a table on a smaller screen - then I have to scroll far left to view the opened popover (if I didn't know that's where it ends up being, I'd think the script is broken and doesn't work).

Here is what I use in a definition for it - am I missing anything? Or something in CSS maybe?

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    emptytext: '...',
    datetimepicker : {
        weekStart : 1
    },
});

Answer 1

Yeah, this is an old issue with tooltip/popup positioning.

Please try the following trick:

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    placement: function (context, source) {
      var popupWidth = 336;
      if(($(window).scrollLeft() + popupWidth) > $(source).offset().left){
        return "right";
      } else {
        return "left";
      }
    },
    emptytext: '...',
    datetimepicker : {
      weekStart : 1
    },
});

Please, review a working example: http://jsfiddle.net/giftedev/yo0ztmkr/1/