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 it's 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.

sgcharlie
  • 1,006
  • 1
  • 10
  • 25
  • 3
    I am afraid you have to use Javascript for this.. – Teja Kantamneni Mar 20 '13 at 20:04
  • 1
    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. – sgcharlie Mar 21 '13 at 13:10
  • 1
    Can you post a fiddle/example code of what you are trying to achieve? – José Luis Mar 27 '13 at 13:36
  • 1
    @sgcharlie 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? – Paul Sham Mar 27 '13 at 17:36
  • 1
    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? – sgcharlie Mar 27 '13 at 19:53

3 Answers3

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 
}
Chit Khine
  • 830
  • 1
  • 13
  • 34
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">
Michael McGinnis
  • 999
  • 9
  • 27
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/

Gavin
  • 11
  • 3