CODEWITHSUNDEEP
htmlcsstextarea
XCS
XCS

Reputation: 28177

Textarea resize

I need to use a textarea to show some text. The problem is that if I place 4-5 rows of text a scrollbar will appear. How can I use CSS/HTML so that the textarea will be as large as it's content (no scrollbar).

If you want to know:
I use the textarea to show some text from a database, so when the textarea (with the text in it) is created, it should show the whole text at once with no scrollbars.

Upvotes: 11

Views: 26288

Answers (9)

Dwayne Forde
Dwayne Forde

Reputation: 1394

Using the resize property works these days:

resize: none;

Upvotes: 0

Guwanch
Guwanch

Reputation: 375

you can use div like textarea. It is possible like this:

<div contenteditable="true" style="width:250px; border:1px solid #777" ></div

Upvotes: 1

Amin Rahimi
Amin Rahimi

Reputation: 235

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow-y: auto;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init (maxH) {
        var text = document.getElementById('text');
    var maxHeight=maxH;
    var oldHeight=  text.scrollHeight;
    var newHeight;
    function resize () {

    text.style.height = 'auto';
    newHeight= text.scrollHeight;
    if(newHeight>oldHeight && newHeight>maxHeight  )
    {
        text.style.height=oldHeight+'px';

    }
    else{
        text.style.height = newHeight+'px';
        oldHeight=  text.scrollHeight;
    }

    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

http://jsfiddle.net/TDAcr/

Upvotes: 12

Jeaf Gilbert
Jeaf Gilbert

Reputation: 12021

I assume name attribute is not used. You can use this alternative (HTML5):

http://jsfiddle.net/JeaffreyGilbert/T3eke/

Upvotes: 0

jeroen
jeroen

Reputation: 91792

I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight property to determine the total height.

Alternatively you could just use a div and style the div to look like a textarea. The div will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.

Upvotes: 5

Freesn&#246;w
Freesn&#246;w

Reputation: 32213

Alright, I just found this and it works very nicely:

<html>
<head>
<script>
function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>

Now, I shouldn't assume that you know Javascript (but you might).

Just run 

textAreaAdjust(document.getElementById("id of your text area"))

Something like that should work. I'm not the best with Javascript (not even close, I just started using it the other day)

That seems to do something similar to what you want. The first code example is for a textarea that dynamically changes based on what is in it (while typing). It will take a couple of changes to get it how you want.

Upvotes: 6

Eskat0n
Eskat0n

Reputation: 937

If you don't mind using JavaScript you can use approach from one of following articles: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/

But from your questing I assume you want pure CSS solution. Then you can just mimic appereance of textarea using simple div and following css (if you just want to display text): 

div {
    cursor: text;
    background: lightGray;
    border: 1px solid gray;
    font-family: monospace;
    padding: 2px 0px 0px 2px;
}

Upvotes: 0

Freesn&#246;w
Freesn&#246;w

Reputation: 32213

Find the height of the font you will most likely be displaying it in. I'm not sure about CSS/HTML but you could use Javascript/PHP/ASP.net to use map to determine how big the text will be based on the number of characters. If you do it in a monospaced font, this will be even easier. Why use a text area when you could just use a label which will do the same thing all by itself?

Upvotes: 0

addaleax
addaleax

Reputation: 89

You could use the CSS height: and width: attributes, e. g. something like <textarea style="width:400px;height:300px">...</textarea>, just use the sizes you want to.

In addition, if you want to suppress the scrollbar, use overflow:hidden.

Upvotes: 1

Related Questions