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

Zee

Can you do a screenshot? I'm not fully picturing the problem – Anergy

Provide more codes please (css and even html) , maybe a fiddle is even better. thanks – Topeka

Could you please provide a reproducible example. I tested it using one of their templates and it seems to popup in the right location just fine -- jsfiddle.net/abhitalks/xBB5x/9105 – Heti

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/

Barrator

Bam! Nailed it! Thank you. – Zee

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.

Camelliacamelopard

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Goodkin

@Goodkin I see. However this question is not enough clear to be answered. The HTML codes which the OP is working on is an essence for such questions, that should be attached but the OP didn't. So my answer is just a couple of hints that could be used to solve the problem. – Camelliacamelopard