CODEWITHSUNDEEP
htmlcssheighttextareareadonly
sgcharlie
sgcharlie

Reputation: 1036

Make readonly textarea's height determined by its content

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.

Upvotes: 6

Views: 5399

Answers (3)

Gavin
Gavin

Reputation: 11

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/

Upvotes: 1

Chit Khine
Chit Khine

Reputation: 850

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 
}

Upvotes: 2

Michael McGinnis
Michael McGinnis

Reputation: 1019

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">

Upvotes: 1

Related Questions