Consistently Sizing a <Textarea> Under Ie, Ff, Safari/Chrome

Display textarea size consistently in all Browsers

If the height is not behaving as expected, so try to set a height for .column. Your textarea is inside of a column and its height is a percentage of his father, but, how high is your father?

Updated

You told that the .center layer is overlapped by the columns if you set a height to the textarea, right? Then we must to set the columns relative to each other and we have to explain to HTML that our .center should to be after our columns. To do this, follow the code:

.column {
width: 48%;
height: 500px; /* for example */
position: relative; /* add this to trasnform your columns
relative to each other */
margin: 1%;
float: left;
}

textarea {
min-width: 100%;
max-width: 100%;

width: 90%;
height: 90%;

min-height: 80%;
max-height: 80%;

overflow: auto;
}

.center {
width: 100%; /* to specify that your "center" must
to occupy 100% of the width on the screen. */
position: relative; /* to transform the position to relative */
float: left; /* to accompany the columns' floating */
clear: both;
text-align: center;
}

Percentage comprehension

Just to make things look better for you: to work with percentage, we need an initial point. This means that for something to have 80% of the height of something else, we need to know the height of something else.

In other words, to .something have 80% of height, we need to know the height of his father, and if his father have 90% of height, the father of his father must to have a specified height. At some point, we need a defined height.

JavaScript alternative

As I said, I have worked too much with percentage measures and no success to found a solution with pure CSS 2.1. Thereat, I created this mini-plugin in JavaScript + jQuery. No work-a-rounds:

function calculateResponsiveHeight(couple) {
for (var value in couple) {
$(value)
.css("height",
$(couple[value].wrapper).height() -
couple[value].spacing + "px");
}
}

Usage:

calculateResponsiveHeight({
".content": {
spacing: 135, // how much you want to spacing your layer?
wrapper: window // who is the reference point?
}
});

Inconsistent textarea handling in browsers

To fix "the bottom margin for the textarea in Chrome", add vertical-align: top to #txtInput.

Live Demo

Now you have consistent rendering between the browsers you listed.

Do you want a solution for the textarea extending outside the container?


This fixes IE8, Firefox, Chrome, Safari, Opera. Doesn't help in IE7 though:

Live Demo

#txtInput
{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

Here, we're using the box-sizing property.

There's probably a way to get it exactly right in even IE7, but unless you really care about that browser, it's probably best to just live with it protruding ~3px outside the container in that browser.

Textarea to resize based on content length

You can check the content's height by setting to 1px and then reading the scrollHeight property:

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

cross browser nowrap textarea

All I did was remove your white-space: nowrap; and it works :).

textarea{overflow: auto;}
<textarea wrap="off">Lorem asldm,és améld masémd éasmdá qw3őri2ő3pjm powemfnsd fdsf lsdmflkms dlkfmsldk mflksdmfk lmsklf</textarea>

Creating a textarea with auto-resize

This works for me (Firefox 3.6/4.0 and Chrome 10/11):

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 () {    var text = document.getElementById('text');    function resize () {        text.style.height = 'auto';        text.style.height = text.scrollHeight+'px';    }    /* 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();}
textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    background-color: #D0D0D0;}
<body onload="init();"><textarea rows="1" style="height:1em;" id="text"></textarea></body>


Related Topics



Leave a reply



Submit