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/

Answer 2

Problem Clarification

If I understand you correctly you have a long table full of fields, which user should complete them (Similar to this demo page). And when you scroll down this table and click on a field its corresponding pop up will be shown far top at the page. Am I right so far? If I'm right ...

I have checked how X-editable would create these pop ups. The main idea it has used is as follows:

• Creates a div (the main container) and appends immediately after the node that would open this pop up.
• This div is using absolute position with a given top and left.
• Value of this top and left can be computed by applying a recursive function which adds recursively offsetX and offsetY of its parents.

This approach for poping up a div is a very common approach and would work in all situations.

---

Causes of this problem

Where is this problem?

• The Library Codes: No, I think the bug is not in the X-editable codes, Because I have changed HTML codes in that demo page by Firefox Developer Tools and changed the value of height of each row to a very big number (1000px) then still those pop ups have been shown in exactly right places.

• Your own codes: It's likely to be there. I have noticed that this library is using a couple of class names for its main div pop up, such as popover, editable-container, editable-popup, fade, in and right. These names are very likely to be clashed with your own defined class names and causes misbehavior in those pop ups, For example you override that absolute position by relative position. So, make sure that your CSS class names have different names than ones defined by X-editable.

I cannot answer you in more details because you have not posted your HTML codes. If my notes did not help, please provide more information about your problem.