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
What Throws Internet Explorer into Quirks Mode
Zoom Out Shiny App at Default in Browser
IE7 Absolute Element Appearing Behind Relative One
How to Custom Table Responsive Materialize
How to Center Text Inside a Li Element Inside an Unordered List
Applying CSS on Drawn Canvas Elements
Font and Line Spacing in Different Browsers
When I Float the Div to the Right the Screen Messes Up...I'Ve Tried Clear and Some Other Options
CSS "Fixed" Child Element Positions Relative to Parent Element Not to the Viewport, Why
How to Override Max-Width for Specific Div
A:Visited Links - Opacity Not Working
Bootstrap 4 Center Navbar Brand with Collapse
Preventing Horizontal Scrolling in Mobile Devices
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
Css3 Odd and Even Only Visible Rows