CODEWITHSUNDEEP
javascriptjquerycsscss-transforms
OpenStack
OpenStack

Reputation: 5596

How to move a div using CSS or javascript within parent container

I am trying to use Bootstrap plugin which provides auto complete feature. While this plugin works well but at times when user is typing closer to border of the text box, the autocomplete div goes outside the textbox. See below image for more information.

How can I using CSS or JavaScript ensure that the auto comeplete div never goes outside the textbox?

enter image description here

Upvotes: 1

Views: 121

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

You can hook into the show event and check whether the popup is getting near the right border of the textarea (or whatever rule you wish to implement). If it is then change the dropdown's position so it displays on the left side of the caret:

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});
  }
}

Full demo: https://jsfiddle.net/dowxo2jk/1/

Upvotes: 2

Related Questions