Login/Register
Make readonly textarea's height determined by its content
Asked Answered
htmlcssheighttextareareadonly
S

3

6

I would to make a readonly input appear like a pre or div tag with CSS.

I would have thought that it would have been easy to do with a textarea but it seems to be quite the task. I'm able to hide the border and the resizing but, for whatever reason, I can't make the textarea's height be determined by its content.

I've seen a lot of stuff on using javascript to auto-resize textareas but is there anything I can do if it's static text that doesn't require javascript?

UPDATE

I just wanted to clarify the purpose of this: I'm looking to write, re-write with javascript, and submit a single readonly element with forms and, at the same time, not have it constrained to a single inline area which forces, at best, scrolling and, at worse, loss of data.

UPDATE 2

Per the request, I've created a fiddle to show an example of what I'm trying to do: http://jsfiddle.net/BUwdE/1/ .

textarea[readonly] {
    width: 100%;
    border: 0;
    resize: none;
    overflow: hidden;
}

You'll see that the content is cutoff at the bottom because the textarea's height isn't determined by its content.

Salted answered 20/3, 2013 at 20:1 Comment(5)
I am afraid you have to use Javascript for this.. – Denominate
So, contenteditable allows the user to essentially use a div like a textarea but browsers can't figure out a way to make a textarea appear like a div? That doesn't make much sense to me. Not saying that it's untrue, it literally makes no sense to me. – Salted
Can you post a fiddle/example code of what you are trying to achieve? – Mayolamayon
@Salted I'm sure it's not that browser can't figure it out, but it's a separation of the purposes between HTML and Javascript. Why don't you want to use Javascript? – Gaff
CSS exists for reasons like this. I don't want to rely on javascript being able to handle styling issues because, undoubtedly, this leads to more issues with styling. Clearly, if you consider things like "contenteditable", the browser is able to render the height of sections when users type into them. Even if you consider a regular div with either static content or content updated via javascript, the browser is able to understand fixed heights and heights determined by the contents of the div. With this in mind, why is it so hard to implement the textarea with such a feature? – Salted
S
2

I actually tried to do what you have been doing. But since it is going to be a read-only input, I actually ended up applying a CSS to a div element. This will be a hack which releases our headache.

HTML

<div class="faketextarea"> some long long text </div>

CSS

.faketextarea {
   // css of a text area 
}
Signature answered 24/6, 2020 at 9:49 Comment(1)
the problem with using div is formatting of textarea content is lost such as \n \r or \t – Robbierobbin
C
1

You can specify the height of a textarea in HTML using the rows attribute, but that doesn't automatically resize. You might have to appeal to the W3C CSS Working Group to get what you want.

<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">
Cease answered 20/11, 2013 at 23:39 Comment(0)
S
1

Modified from here:

function auto_grow(){
  var ts = document.getElementsByTagName('textarea')
  for (i in Object.keys(ts)){
    ts[i].style.height = "5px";
    ts[i].style.height = (ts[i].scrollHeight+49)+"px";
  }
}

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;
    ...
    (properties for your needs)
}

<body onload='auto_grow()'>
    <textarea>anytexts</textarea>
    <textarea>texts 2</textarea>    
</body>

The differences being I have assigned the auto_grow() function on the html <body> tag instead of the <textarea> tag

fiddle: https://jsfiddle.net/btq7m3a6/

More: https://jsfiddle.net/8o67huq2/

Sowder answered 23/5, 2022 at 7:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.