CODEWITHSUNDEEP
csstwitter-bootstraptextarea
bersling
bersling

Reputation: 19272

Automatically resizing textarea in bootstrap

I found the following very simple way to automatically adjust a textarea to the text height in this jsfiddle http://jsfiddle.net/tovic/gLhCk/:

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');
body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

However, I'm using bootstrap in my project and this introduces problems.

  1. The textarea is only 4px high instead of 16. It seems like bootstrap changes the way margins and paddings and heights work?
  2. When hitting enter, the text is jumping up and down, which is irritating to the eye.

I tried to delete all bootstrap classes in the HTML inspector of my browser but the problem was still there. Does anyone have an idea how to resolve this?

Here's the code when bootstrap's CSS is added:

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');
body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Upvotes: 10

Views: 54538

Answers (8)

GAMER ESAN
GAMER ESAN

Reputation: 1

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Upvotes: -1

Ruben
Ruben

Reputation: 149

it is more simpliest, just add a propertie like rows="10", you can show as meny as you want.

Upvotes: -4

rg1
rg1

Reputation: 11

getbootstrap.com said:

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

hidden seemed to do the job just fine ie.. remove the overflow. As always, you must be inside

Upvotes: 1

besomist
besomist

Reputation: 39

If you want the input box to automatically adapt to the text height. You can try not to use input / textarea but to use div like that:

<div contenteditable="true" aria-multiline="true"></div>

Upvotes: 3

Kurniawan Prasetyo
Kurniawan Prasetyo

Reputation: 729

I have the same problem, bootstrap textarea with autosize until I found the solution here, textarea-autosize lib by javierjulio, It works for me, you can try it. 

textarea.textarea-autosize {
  height: 2.25rem;
  min-height: 2.25rem;
  resize: none;
  overflow-y:hidden;
}

textarea.textarea-autosize.form-control-lg {
  height: 3.75rem;
  min-height: 3.75rem;
}

textarea.textarea-autosize.form-control-sm {
  height: 2rem;
  min-height: 2rem;
}

For sample of this library you can visit this page jsfiddle. Thanks

Upvotes: 1

bersling
bersling

Reputation: 19272

Thanks for all your answers, it gave me valuable insights into what I had to change. In the end, a bit more padding-bottom in the css did the trick.

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');
body {
  padding:50px;  
}

textarea {
  /* margin:0px 0px; this is redundant anyways since its specified below*/
  padding-top:10px;
  padding-bottom:25px; /* increased! */
  /* height:16px; */
  /* line-height:16px; */
  width:100%; /* changed from 96 to 100% */
  display:block;
  /* margin:0px auto; not needed since i have width 100% now */
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Upvotes: 16

Ismail Farooq
Ismail Farooq

Reputation: 6827

replace height with min-height

textarea {
  margin:0px 0px;
  padding:5px;
  min-height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

Upvotes: 3

Priyank Dey
Priyank Dey

Reputation: 1124

You can use !important to overwrite bootstrap property.

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px !important;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

Upvotes: 0

Related Questions