The X-editable datepicker appears in the same place all the time - how to pop it up next to the actual date field?

Question

In using X-editable, I ran into this problem if, if I specify the datepicker: "popup" field mode, I get a popup to show just fine ... but now if I have a long table (vertical or horizontal) the farther (or right) the table I'm going to, the worse it gets - this pop-up date / date-time selection appears only at a certain position on the page (top left).

So, if I have 50 entries and I click on one of the bottom to open the date picker, I don’t even see it pop up and should have assumed it appeared, so I need to scroll all the way to the top of the table so to see him.

And this is even worse if I go far in the table on the smaller screen - then I need to scroll to the far left to view the open popover (if I did not know where it ends, I think the script is broken and does not work).

Here is what I use in the definition for it - am I missing something? Or is something possible in CSS?

$('.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

Yes, this is an old issue with the positioning of tooltips / popups.

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 see a working example: http://jsfiddle.net/giftedev/yo0ztmkr/1/

Answer 2

Clarification of the problem

If you correctly understood that you have a long table filled with fields, the user should fill them out (Like this demo page ). And when you scroll down this table and click on the field, its corresponding tooltip will be shown at the top of the page. Am i still right? If I am right ...

I checked how X-editable will create these popups. The basic idea that he used is as follows:

• Creates a div (main container) and adds immediately after the node, which will open a popup.
• This div uses absolute position with given top and left .
• The value of this top and left can be calculated using a recursive function that recursively adds offsetX and offsetY its parents.

This approach for popping up a div is a very common approach and will work in all situations.

---

Reasons for this problem

Where is the problem?

• Library Codes: No, I think the error is not in X-editable codes, because I changed the HTML codes on this demo page of Firefox Developer Tools and changed the value from the height of each line to a very large number (1000 pixels), then all these pop-ups windows were shown in flat places.

• Your own codes: It will probably be. I noticed that this library uses a couple of class names for its main pop-up div , such as popover , editable-container , editable-popup , fade , in and right . These names are likely to conflict with your own class names and cause abnormal behavior in these pop-ups. For example, you redefine this absolute position by relative position. So make sure your CSS class names have different names than those defined by X-editable.

I cannot answer you in more detail because you did not post your HTML codes. If my notes did not help, provide more information about your problem.