CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gavin Friel
Gavin Friel

Reputation: 191

textarea not scrolling when text exceeds box size

I'm working on a message box on codepen. I'm using <textarea> to allow for a scrolling box on text entry however this doesn't seem to be happening.

CodePen: https://codepen.io/gavdraws/pen/dXWpZk

HTML

<div id="container">
 <span class="input message">
    <textarea class="input__field" id="input-5"></textarea>
    <label for="input-5" class="input__label">
      <span class="input__label-content">Message</span>
    </label>
  </span>
</div>

JS

var $input;

function onInputFocus(event) {
  var $target = $(event.target);
  var $parent = $target.parent();
  $parent.addClass('input--filled');
};

function onInputBlur(event) {
  var $target = $(event.target);
  var $parent = $target.parent();

  if (event.target.value.trim() === '') {
    $parent.removeClass('input--filled');
  }
};

$(document).ready(function() {
  $input = $('.input__field');

  // in case there is any value already
  $input.each(function(){
    if ($input.val().trim() !== '') {
      var $parent = $input.parent();
      $parent.addClass('input--filled');
    }
  });

  $input.on('focus', onInputFocus);
  $input.on('blur', onInputBlur);
});

Your help would be greatly appreciated!

Upvotes: 3

Views: 993

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

Your <label> is in front of your text area, so it's not scrolling. Add pointer-events: none; to your .input__label div.

.input__label {
  pointer-events: none;
}

CodePen

Upvotes: 3

Related Questions