如何在父容器中使用CSS或javascript移動div

Question

我正在嘗試使用提供自動完成功能的Bootstrap plugin。雖然這個插件運行良好，但有時當用戶鍵入文本框的邊界時，自動完成div會超出文本框。有關更多信息，請參閱下圖。

如何使用CSS或JavaScript確保自動填充div永遠不會超出文本框？

Answer 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/