Question

在使用X-editable时我遇到了这个问题，如果我指定了datepicker字段模式：“popup”，我会让popup显示得很好......但是现在如果我有一个长表（垂直）或者水平地），我走的桌子越往下（或右），它就越糟糕 - 这个日期/日期时间选择器弹出窗口仅在页面上的特定位置（左上角）弹出。

所以，如果我有50条记录，并点击其中一个底部打开日期选择器，我甚至看不到它弹出并且必须假设它已经弹出，所以我必须滚动所有从表格的顶部看它的方式。

如果我在一个小屏幕上的桌子上走得更远，那就更糟了 - 那么我必须向左滚动以查看打开的弹出窗口（如果我不知道它最终会在哪里，我想脚本坏了，不起作用。）

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

Answer 2

问题澄清

如果我理解正确，你会有一个包含字段的长表，用户应该填写它们（类似于this demo page）。当您向下滚动此表并单击某个字段时，其相应的弹出窗口将显示在页面的顶部。我到目前为止对吗？如果我是对的......

我已经检查了X-editable如何创建这些弹出窗口。它使用的主要思想如下：

创建一个div（主容器），并在打开此弹出窗口的节点后立即附加。
此div使用绝对位置与给定top和left。
此top和left的值可以通过应用递归函数来计算，该递归函数会递归递归offsetX和offsetY。

这种弹出div的方法是一种非常常见的方法，适用于所有情况。

此问题的原因

这个问题在哪里？

图书馆代码：不，我认为该错误不在X-editable代码中，因为我已经通过Firefox Developer Tools更改了该演示页面中的HTML代码并更改了值每行的高度到一个非常大的数字（1000px），然后那些弹出窗口已经显示在恰当的位置。
您自己的代码：很可能就在那里。我注意到这个库为其主要div弹出窗口使用了几个类名，例如popover，editable-container，editable-popup，fade， in和right。这些名称很可能与您自己定义的类名冲突，并导致这些弹出窗口中的错误行为，例如，您通过相对位置覆盖该绝对位置。因此，请确保您的CSS类名称与X-editable定义的名称不同。

由于您尚未发布HTML代码，因此我无法详细回答您的问题。如果我的笔记没有帮助，请提供有关您的问题的更多信息。

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

2 个答案:

问题澄清

此问题的原因