Textarea don't make parent grow

Question

I have a textarea in a form inside a div with max-height 80. My probles is that the textarea should grow from it's initial height to the max height from the cb-input div when the text in the textarea is too long to its initial height.

<div class="cb-input">
  <form class="cb-form" action="">
    <textarea></textarea>
  </form>
</div>

These are my css classes.

.cb-input {
  width: 100%;
  min-height: 45px;
  max-height: 80px;
}

.cb-form {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cb-input textarea{
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  padding: 6px 14px 2px 10px;
  width: 100%;
  height: 100%;
  font-family: Roboto;
  font-size: 14px;
  border: none;
  resize: none;
  overflow-y: auto;
}

I don't know if the textare just don't grow because the overflow-y: auto but maybe. Any idea?

Please, check the answer by [Moussawi7](http://stackoverflow.com/questions/17772260/textarea-auto-height/24676492#24676492) as it does exactly what you want.. — jagb, Oct 15 '16 at 21:42
I worked on exactly the same problem in a recent project. Unfortunately there is no css-only solution to what we want, you'll have to use javascript. A `` won't grow automatically as the user enters more text. Using `overflow-y: auto;` on an element means it'll get a scrollbar when the element is taller than 80px. — Eystein, Oct 15 '16 at 21:43

score 0 · Answer 1 · answered Oct 15 '16 at 21:56

I've created a fiddle that shows an example with this jquery plugin, https://github.com/ro31337/jquery.ns-autogrow. I modified your css so overflow was hidden. If you don't do that the scroll bar will flash.

This also includes the entire jquery plughin javascript.

/*!
  Non-Sucking Autogrow 1.1.6
  license: MIT
  author: Roman Pushkin
  https://github.com/ro31337/jquery.ns-autogrow
*/
(function() {
  var getVerticalScrollbarWidth;

  (function($, window) {
    return $.fn.autogrow = function(options) {
      if (options == null) {
        options = {};
      }
      if (options.horizontal == null) {
        options.horizontal = true;
      }
      if (options.vertical == null) {
        options.vertical = true;
      }
      if (options.debugx == null) {
        options.debugx = -10000;
      }
      if (options.debugy == null) {
        options.debugy = -10000;
      }
      if (options.debugcolor == null) {
        options.debugcolor = 'yellow';
      }
      if (options.flickering == null) {
        options.flickering = true;
      }
      if (options.postGrowCallback == null) {
        options.postGrowCallback = function() {};
      }
      if (options.verticalScrollbarWidth == null) {
        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
      }
      if (options.horizontal === false && options.vertical === false) {
        return;
      }
      return this.filter('textarea').each(function() {
        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
        $e = $(this);
        if ($e.data('autogrow-enabled')) {
          return;
        }
        $e.data('autogrow-enabled');
        minHeight = $e.height();
        minWidth = $e.width();
        heightPadding = $e.css('lineHeight') * 1 || 0;
        $e.hasVerticalScrollBar = function() {
          return $e[0].clientHeight < $e[0].scrollHeight;
        };
        $shadow = $('<div class="autogrow-shadow"></div>').css({
          position: 'absolute',
          display: 'inline-block',
          'background-color': options.debugcolor,
          top: options.debugy,
          left: options.debugx,
          'max-width': $e.css('max-width'),
          'padding': $e.css('padding'),
          fontSize: $e.css('fontSize'),
          fontFamily: $e.css('fontFamily'),
          fontWeight: $e.css('fontWeight'),
          lineHeight: $e.css('lineHeight'),
          resize: 'none',
          'word-wrap': 'break-word'
        }).appendTo(document.body);
        if (options.horizontal === false) {
          $shadow.css({
            'width': $e.width()
          });
        } else {
          fontSize = $e.css('font-size');
          $shadow.css('padding-right', '+=' + fontSize);
          $shadow.normalPaddingRight = $shadow.css('padding-right');
        }
        update = (function(_this) {
          return function(event) {
            var height, val, width;
            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
              return Array(space.length - 1).join('&nbsp;') + ' ';
            });
            if (/(\n|\r)/.test(_this.value)) {
              val += '<br />';
              if (options.flickering === false) {
                val += '<br />';
              }
            }
            $shadow.html(val);
            if (options.vertical === true) {
              height = Math.max($shadow.height() + heightPadding, minHeight);
              $e.height(height);
            }
            if (options.horizontal === true) {
              $shadow.css('padding-right', $shadow.normalPaddingRight);
              if (options.vertical === false && $e.hasVerticalScrollBar()) {
                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
              }
              width = Math.max($shadow.outerWidth(), minWidth);
              $e.width(width);
            }
            return options.postGrowCallback($e);
          };
        })(this);
        $e.change(update).keyup(update).keydown(update);
        $(window).resize(update);
        return update();
      });
    };
  })(window.jQuery, window);

  getVerticalScrollbarWidth = function() {
    var inner, outer, w1, w2;
    inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);
    document.body.appendChild(outer);
    w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    w2 = inner.offsetWidth;
    if (w1 === w2) {
      w2 = outer.clientWidth;
    }
    document.body.removeChild(outer);
    return w1 - w2;
  };

}).call(this);

$(function() {
   $('.cb-input textarea').autogrow({vertical: true, horizontal: false});
});

.cb-input {
  width: 100%;
  min-height: 45px;
  max-height: 80px;
}

.cb-form {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cb-input textarea{
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  padding: 6px 14px 2px 10px;
  width: 100%;
  height: 100%;
  font-family: Roboto;
  font-size: 14px;
  border: none;
  resize: none;
  overflow: hidden;
  border: 1px black solid;
}

<body>
  <div class="cb-input">
    <form class="cb-form" action="">
      <textarea></textarea>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Pritish Vaidya · Accepted Answer · 2016-10-15T23:04:51.743

0

Here is a working fiddle

height can be adjusted by changing the css.

Hope it may help.

edited Oct 15 '16 at 23:04

answered Oct 15 '16 at 22:35

Pritish Vaidya

21,561
3
58
76

There is a problem, the height doesn't drecrease when the text is deleted. :( – vanillaHoman Oct 15 '16 at 22:54
It works, but why did you set overflow-y: hidden in the script? because i need the scroll bar, it's something important keep the overflow-y hidden? – vanillaHoman Oct 15 '16 at 23:16
yea u can set it to auto or just remove it and add it to the css – Pritish Vaidya Oct 15 '16 at 23:20

Textarea don't make parent grow

2 Answers2