How to remove bottom padding in textarea?

Question

How to remove bottom padding in textarea ?

$('textarea').css("height", $("textarea").prop("scrollHeight"))

textarea {
  width: 300px;
  resize: none;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a </textarea>

You may want to look at this https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length — JFC, Aug 25 '17 at 23:03
maybe there is other css causing it, you must provide a live version w or a fiddle so we can reproduce the problem — Aref Ben Lazrek, Aug 26 '17 at 00:42
The textarea `scrollheight` is measured **before** the heigh change making the scrollbar dissapear... Which make the textarea innerwidth a little bit larger... The text then wraps to take that scrollbar space in width, leaving some white space at the bottom. @Farid's solution is to prevent any scroll bar... So the measurement made before the height change is correct. — Louys Patrice Bessette, Aug 26 '17 at 02:50

score 2 · Accepted Answer · answered Aug 25 '17 at 23:05

You should use

overflow-y: hidden

as folows

$('textarea').css("height", $("textarea").prop("scrollHeight"))

textarea {
  width: 300px;
  resize: none;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a </textarea>

How to remove bottom padding in textarea?

1 Answers1