Niranjan Parmar Niranjan Parmar - 1 year ago 28
CSS Question

how to set button right outside textarea but when the textarea height increase than the button must goes down with textarea?

I set TextArea and Button with two different div. div1 has textarea and div2 has button. Now I want do when the textarea height increase button must goes down with text area.

Thanks

Answer Source

Is this what you are looking for ?

$.each($('textarea'), function() {
  var offset = this.offsetHeight - this.clientHeight;

  var resizeTextarea = function(el) {
    $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
  };
  $(this).on('keyup input', function() {
    resizeTextarea(this);
  }).removeAttr('data-autoresize');
});

$("textarea").on("keyup", function() {
  var textareaHeight = $(this).height();
  var buttonHeight = $(".div2 button").height()
  var move = parseInt(textareaHeight - buttonHeight)
  $(".div2 button").css("margin-top", move);
});
.div1 {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="div1">
  <textarea></textarea>
</div>
<div class="div2">
  <button>button</button>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download