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

Question

在使用 X-editable 时，我运行遇到了这个问题，如果我指定日期选择器字段模式："popup"，我的弹出窗口显示得很好...但是现在如果我有一个长 table（垂直或水平），我去的 table 越往下（或向右），情况就越糟 - 这个 date/datetime 选择器弹出窗口只在页面上的特定位置（左上角）。

因此，如果我有 50 条记录，然后单击其中一条底部的记录以打开日期选择器，我什至看不到它弹出并不得不假设它已经弹出，所以我必须一直滚动到 table 的顶部以查看它。

如果我在较小屏幕上的 table 中向右移动，情况会更糟 - 然后我必须向左滚动以查看打开的弹出窗口（如果我不知道它最终会出现在哪里）是的，我认为脚本已损坏且无法运行）。

这是我在定义中使用的内容 - 我是否遗漏了什么？或者 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

问题澄清

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

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

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

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

这个问题的原因

这个问题出在哪里？

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

我无法更详细地回答你，因为你还没有发布你的 HTML 代码。如果我的笔记没有帮助，请提供有关您的问题的更多信息。

Answer 2

是的，这是 tooltip/popup 定位的老问题。

请尝试以下技巧：

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

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

X-editable datepicker popping up on the same spot all the time - how to have it pop up next to the actual date field?

css

jquery

x-editable

twitter-bootstrap-3

问题澄清

这个问题的原因