X-editable datepicker一直出现在同一个地方 - 如何让它弹出实际日期字段旁边？

Question

在使用X-editable时我遇到了这个问题,如果我指定了datepicker字段模式:"popup",我会让弹出窗口显示得很好......但是现在如果我有一个长桌子(垂直或水平),进一步向下(或向右)我去的表,它越糟糕 - 这个日期/日期时间选择器弹出窗口仅在页面上的特定位置(左上角)弹出.

因此,如果我有50条记录并点击其中一个底部打开日期选择器,我甚至看不到它弹出并且必须假设它已经弹出,所以我必须一直向上滚动在表格的顶部看到它.

如果我在一个较小的屏幕上的桌子上走得很远,那就更糟了 - 那么我必须向左滚动才能看到打开的popover(如果我不知道它最终会在哪里,我认为脚本是破碎,不起作用).

以下是我在定义中使用的内容 - 我错过了什么吗？或者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

是的,这是工具提示/弹出定位的一个老问题.

请尝试以下技巧:

$('.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
    },
});

请查看一个工作示例:http://jsfiddle.net/giftedev/yo0ztmkr/1/