如何在父容器中使用 CSS 或 javascript 移动 div答案

【问题标题】：How to move a div using CSS or javascript within parent container如何在父容器中使用 CSS 或 javascript 移动 div
【发布时间】：2017-03-19 11:04:21
【问题描述】：

我正在尝试使用提供自动完成功能的Bootstrap plugin。虽然此插件运行良好，但有时当用户在靠近文本框边框的地方键入时，自动完成 div 会超出文本框。有关详细信息，请参见下图。

如何使用 CSS 或 JavaScript 确保自动完成 div 永远不会超出文本框？

【问题讨论】：

并不是问题本身的真正答案，但链接的文档指出您可以将position 参数设置为"bottom"，而不是默认的"caret"。为较小的屏幕分辨率使用不同的位置可能会起作用。
@ppajer：谢谢你的提示。我确实查看了该属性，它使用 position:bottom 会导致自动完成 div 显示在文本框下方

标签： javascript jquery css css-transforms

【解决方案1】：

您可以挂钩show 事件并检查弹出窗口是否接近textarea 的右边界（或您希望实施的任何规则）。如果是，则更改下拉菜单的位置，使其显示在插入符号的左侧：

onshow: function (e) {
  var $dropdown = this.$dropdown.find('.dropdown-menu');
  var textAreaWidth = this.$element.width();
  var dropdownWidth = $dropdown.width();
  var dropdownLeft = $dropdown.position().left;

  // display left of caret if menu gets near right textarea border
  if (dropdownLeft + dropdownWidth >= textAreaWidth)
  {
    $dropdown.css({left: dropdownLeft - dropdownWidth});
  }
}

完整演示：https://jsfiddle.net/dowxo2jk/1/

【讨论】：