Styjun

How do we know the LHC results are robust?

Do the temporary hit points from the Battlerager barbarian's Reckless Abandon stack if I make multiple attacks on my turn?

Failed to fetch jessie backports repository

Efficient way to transport a Stargate

Is there a problem with hiding "forgot password" until it's needed?

How to Reset Passwords on Multiple Websites Easily?

A problem in Probability theory

Shortcut for value of this indefinite integral?

Go Pregnant or Go Home

Trouble understanding the speech of overseas colleagues

What can we do to stop prior company from asking us questions?

Short story about space worker geeks who zone out by 'listening' to radiation from stars

Unreliable Magic - Is it worth it?

Energy of the particles in the particle accelerator

Replace character with another only if repeated and not part of a word

What does "I’d sit this one out, Cap," imply or mean in the context?

Pole-zeros of a real-valued causal FIR system

How easy is it to start Magic from scratch?

Purchasing a ticket for someone else in another country?

How can I quit an app using Terminal?

How does it work when somebody invests in my business?

Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?

Inappropriate reference requests from Journal reviewers

Is `x >> pure y` equivalent to `liftM (const y) x`

Can I make a textarea grow with text to a max height?

Make JSF InputTextarea expand why adding textMake a div fill the height of the remaining screen spaceCSS 100% height with padding/marginAuto-size dynamic text to fill fixed size containerExpand a div to take the remaining widthHow to make a div 100% height of the browser window?How can I transition height: 0; to height: auto; using CSS?Make body have 100% of the browser heightTextarea grow with textText from textarea to div with limited width and heightHow can I make Bootstrap columns all the same height?

21

4

I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible?

html css textarea

share|improve this question

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the max height?
  
  – Explosion Pills
  Apr 5 '13 at 22:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yup, that sounds possible. You will need javascript to do that.
  
  – Travis J
  Apr 5 '13 at 22:50
  

  
  
  
  

add a comment | 

21

4

I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible?

html css textarea

share|improve this question

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the max height?
  
  – Explosion Pills
  Apr 5 '13 at 22:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yup, that sounds possible. You will need javascript to do that.
  
  – Travis J
  Apr 5 '13 at 22:50
  

  
  
  
  

add a comment | 

I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible?

html css textarea

share|improve this question

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

share|improve this question

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

share|improve this question

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

asked Apr 5 '13 at 22:48

DarkenwolfDarkenwolf

147128

3 Answers
3

active

oldest

votes

50

You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

HTML

<div contenteditable>
 type here...
</div>

CSS

div[contenteditable]
 border: 1px solid black;
 max-height: 200px;
 overflow: auto;

share|improve this answer

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  +1 for contenteditable.
  
  – Vucko
  Apr 5 '13 at 23:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Beautiful, thanks
  
  – Darkenwolf
  Apr 5 '13 at 23:26
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Be aware the contenteditable renders completely different HTML on different browsers, especially when it comes to line breaks.
  
  – Daniel Allen Langdon
  Jun 28 '13 at 22:06
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @DanielAllenLangdon's right. I substituted pre for div and got the line breaking and wrapping I wanted in Chrome. When I saw his comment, I checked Firefox and ended up having to add white-space: pre-wrap to my CSS. I didn't try other browsers.
  
  – Tyler Collier
  Jan 22 '15 at 18:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What if I cant use contenteditable due to React restrictions? Aaand I can't use Draft.js either because of delayed state updates.
  
  – vasekhlav
  Oct 27 '16 at 15:31
  

  
  
  
  

 | 
show 1 more comment

6

Here is the JavaScript function

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) 
 textarea = document.getElementById(TextArea);
 textareaRows = textarea.value.split("n");
 if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
 else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
 else counter = 1;
 textarea.rows = counter; 

here is the css style

.textarea 
height: auto;
resize: none; 

and here is the HTML code

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

it works fine for me

share|improve this answer

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  What if the textarea contains no newlines, just wrapping?
  
  – Tim Medora
  Apr 5 '13 at 22:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i just copied this code from an older project... but it's possible to change the code to your needs... mabye you can split the code every 40 signs
  
  – Alex Ruhl
  Apr 5 '13 at 23:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Bad solution. What if user doesn't use enter?
  
  – 18C
  Dec 29 '17 at 11:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Worked for me, with little change in my case. function ResizeTextBox(elm) var rowcount = $(elm).attr('rows'); var textareaRows = $(elm).val().split("n"); if (textareaRows[0] != "undefined" && textareaRows.length < rowcount - 1) counter = rowcount; else counter = textareaRows.length + 1; $(elm).attr('rows', counter)
  
  – Arvind Krmar
  Jan 9 '18 at 16:41
  

  
  
  
  

add a comment | 

5

There's an excellent A List Apart article on this topic: Expanding Text Areas Made Elegant

share|improve this answer

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Thanks for the link! Great article. I think you should at least explain in a couple of sentences how the author does it - to give readers some context before they click the link. Otherwise your post would be better as a comment according to Stack Overflow etiquette. Also, to save people time debugging, I needed to change container.className += "active"; to container.className += " active"; to get the author's code working.
  
  – user993683
  Jan 5 '17 at 6:19
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15844868%2fcan-i-make-a-textarea-grow-with-text-to-a-max-height%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

50

You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

HTML

<div contenteditable>
 type here...
</div>

CSS

div[contenteditable]
 border: 1px solid black;
 max-height: 200px;
 overflow: auto;

share|improve this answer

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  +1 for contenteditable.
  
  – Vucko
  Apr 5 '13 at 23:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Beautiful, thanks
  
  – Darkenwolf
  Apr 5 '13 at 23:26
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Be aware the contenteditable renders completely different HTML on different browsers, especially when it comes to line breaks.
  
  – Daniel Allen Langdon
  Jun 28 '13 at 22:06
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @DanielAllenLangdon's right. I substituted pre for div and got the line breaking and wrapping I wanted in Chrome. When I saw his comment, I checked Firefox and ended up having to add white-space: pre-wrap to my CSS. I didn't try other browsers.
  
  – Tyler Collier
  Jan 22 '15 at 18:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What if I cant use contenteditable due to React restrictions? Aaand I can't use Draft.js either because of delayed state updates.
  
  – vasekhlav
  Oct 27 '16 at 15:31
  

  
  
  
  

 | 
show 1 more comment

50

You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

HTML

<div contenteditable>
 type here...
</div>

CSS

div[contenteditable]
 border: 1px solid black;
 max-height: 200px;
 overflow: auto;

share|improve this answer

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  +1 for contenteditable.
  
  – Vucko
  Apr 5 '13 at 23:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Beautiful, thanks
  
  – Darkenwolf
  Apr 5 '13 at 23:26
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Be aware the contenteditable renders completely different HTML on different browsers, especially when it comes to line breaks.
  
  – Daniel Allen Langdon
  Jun 28 '13 at 22:06
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @DanielAllenLangdon's right. I substituted pre for div and got the line breaking and wrapping I wanted in Chrome. When I saw his comment, I checked Firefox and ended up having to add white-space: pre-wrap to my CSS. I didn't try other browsers.
  
  – Tyler Collier
  Jan 22 '15 at 18:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What if I cant use contenteditable due to React restrictions? Aaand I can't use Draft.js either because of delayed state updates.
  
  – vasekhlav
  Oct 27 '16 at 15:31
  

  
  
  
  

 | 
show 1 more comment

You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

HTML

<div contenteditable>
 type here...
</div>

CSS

div[contenteditable]
 border: 1px solid black;
 max-height: 200px;
 overflow: auto;

share|improve this answer

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

<div contenteditable>
 type here...
</div>

div[contenteditable]
 border: 1px solid black;
 max-height: 200px;
 overflow: auto;

share|improve this answer

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

answered Apr 5 '13 at 22:59

Sandro PaganottiSandro Paganotti

1,7541111

6

Here is the JavaScript function

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) 
 textarea = document.getElementById(TextArea);
 textareaRows = textarea.value.split("n");
 if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
 else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
 else counter = 1;
 textarea.rows = counter; 

here is the css style

.textarea 
height: auto;
resize: none; 

and here is the HTML code

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

it works fine for me

share|improve this answer

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  What if the textarea contains no newlines, just wrapping?
  
  – Tim Medora
  Apr 5 '13 at 22:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i just copied this code from an older project... but it's possible to change the code to your needs... mabye you can split the code every 40 signs
  
  – Alex Ruhl
  Apr 5 '13 at 23:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Bad solution. What if user doesn't use enter?
  
  – 18C
  Dec 29 '17 at 11:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Worked for me, with little change in my case. function ResizeTextBox(elm) var rowcount = $(elm).attr('rows'); var textareaRows = $(elm).val().split("n"); if (textareaRows[0] != "undefined" && textareaRows.length < rowcount - 1) counter = rowcount; else counter = textareaRows.length + 1; $(elm).attr('rows', counter)
  
  – Arvind Krmar
  Jan 9 '18 at 16:41
  

  
  
  
  

add a comment | 

6

Here is the JavaScript function

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) 
 textarea = document.getElementById(TextArea);
 textareaRows = textarea.value.split("n");
 if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
 else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
 else counter = 1;
 textarea.rows = counter; 

here is the css style

.textarea 
height: auto;
resize: none; 

and here is the HTML code

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

it works fine for me

share|improve this answer

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  What if the textarea contains no newlines, just wrapping?
  
  – Tim Medora
  Apr 5 '13 at 22:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i just copied this code from an older project... but it's possible to change the code to your needs... mabye you can split the code every 40 signs
  
  – Alex Ruhl
  Apr 5 '13 at 23:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Bad solution. What if user doesn't use enter?
  
  – 18C
  Dec 29 '17 at 11:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Worked for me, with little change in my case. function ResizeTextBox(elm) var rowcount = $(elm).attr('rows'); var textareaRows = $(elm).val().split("n"); if (textareaRows[0] != "undefined" && textareaRows.length < rowcount - 1) counter = rowcount; else counter = textareaRows.length + 1; $(elm).attr('rows', counter)
  
  – Arvind Krmar
  Jan 9 '18 at 16:41
  

  
  
  
  

add a comment | 

Here is the JavaScript function

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) 
 textarea = document.getElementById(TextArea);
 textareaRows = textarea.value.split("n");
 if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
 else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
 else counter = 1;
 textarea.rows = counter; 

here is the css style

.textarea 
height: auto;
resize: none; 

and here is the HTML code

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

it works fine for me

share|improve this answer

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) 
 textarea = document.getElementById(TextArea);
 textareaRows = textarea.value.split("n");
 if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
 else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
 else counter = 1;
 textarea.rows = counter; 

.textarea 
height: auto;
resize: none; 

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

share|improve this answer

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

edited May 23 '15 at 15:17

colmtuite

1,57083060

edited May 23 '15 at 15:17

colmtuite

1,57083060

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

answered Apr 5 '13 at 22:54

Alex RuhlAlex Ruhl

2611514

5

There's an excellent A List Apart article on this topic: Expanding Text Areas Made Elegant

share|improve this answer

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Thanks for the link! Great article. I think you should at least explain in a couple of sentences how the author does it - to give readers some context before they click the link. Otherwise your post would be better as a comment according to Stack Overflow etiquette. Also, to save people time debugging, I needed to change container.className += "active"; to container.className += " active"; to get the author's code working.
  
  – user993683
  Jan 5 '17 at 6:19
  

  
  
  
  

add a comment | 

5

There's an excellent A List Apart article on this topic: Expanding Text Areas Made Elegant

share|improve this answer

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Thanks for the link! Great article. I think you should at least explain in a couple of sentences how the author does it - to give readers some context before they click the link. Otherwise your post would be better as a comment according to Stack Overflow etiquette. Also, to save people time debugging, I needed to change container.className += "active"; to container.className += " active"; to get the author's code working.
  
  – user993683
  Jan 5 '17 at 6:19
  

  
  
  
  

add a comment | 

There's an excellent A List Apart article on this topic: Expanding Text Areas Made Elegant

share|improve this answer

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

share|improve this answer

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238

answered Mar 19 '15 at 5:13

olivergeorgeolivergeorge

127238