Display textarea size consistently in all Browsers

Question

I've got a slight issue with the below code in IE.

The design is perfect in Chrome and Firefox but IE renders the textarea size very small. I want it as it looks in Firefox or Chrome.

It might be a duplicate of
Consistently sizing a <textarea> under IE, FF, Safari/Chrome
OR
Firefox / IE textarea sizing quirk - workarounds?
but there are no proper solutions mentioned. So I started this.

I'm sure that jQuery can sort it out but I want only CSS in my page, Is there any proper CSS solution to it??

I'm not able to log into jsFiddle, so, no jsFiddle guys.. :(

<!DOCROOT html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Code Compressor</title>

    <link href="styles.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        .container {
            width: 100%;
            overflow: hidden;
        }

        .column {
            width: 48%;
            margin: 1%;
            float: left;
        }

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

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

            overflow: auto;
        }

        .center {
            clear: both;
            text-align: center;
        }

    </style>

</head>


<body>

    <div class="container">

        <div class="column">
            <div>Input Source:</div>
            <textarea id="sourceCode" name="sourceCode" ></textarea>
        </div>

        <div class="column">
            <div>Compressed Output:</div>
            <textarea id="outputCode" name="outputCode" ></textarea>
        </div>

        <div class="center">
            <input type="button" id="compressButton" name="compressButton" 
                value="Compress" onClick="compress" />
        </div>

    </div>

</body>

</html>

what if you put `width: 100%; height: 80%` in your textarea's css? — Aguardientico, Jul 03 '13 at 12:38
@Aguardientico: The width works fine, but the Height is not increasing, It displays only 1 line by default now. — LearningDeveloper, Jul 03 '13 at 12:44
@GauthamPJ Your textarea is considering that the height of `.column` is just one line. Try to add to your `.column` a height of 300px, for example. — Guilherme Oderdenge, Jul 03 '13 at 12:46
@chiefGui: Yeah, this increases the height, but displaces the *Compress Button* about an inch down the page. :/ — LearningDeveloper, Jul 03 '13 at 12:49
I just have this problem with Firefox. I think the row and col attribute of textarea behaves differently regards the browsers. I removed the row and col attribute and used width and height in my CSS. The problem is resolved in this way for me — Noman_ibrahim, Mar 28 '20 at 10:39

Guilherme Oderdenge · Accepted Answer · 2013-07-03T13:26:18.950

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?
    }
});

Did add the width and height, only the width is being affected, the height remains at only 1 line height. — LearningDeveloper, Jul 03 '13 at 12:46
Ok, if I give the height in PX, it'll work, but the Compress button does go a bit farther from the two textarea boxes. Can't I have *%* height so that it's totally dynamic?? — LearningDeveloper, Jul 03 '13 at 13:05
You can define the height with percentage, but with pure CSS, at some point you'll need to have a defined height. With CSS 3, you can use [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to make this completely dynamic, but without this function, you should use JavaScript. — Guilherme Oderdenge, Jul 03 '13 at 13:13
Oh.. K.. This is the best answer up till now. For now I'll put in the PX value.. But will keep the thread open for a day to see if any new Answers turn up. — LearningDeveloper, Jul 03 '13 at 13:15
I'm working in an application that uses fully responsive layout and I'm working a lot with percentage. Seriously, I have searched too much around this subject and with pure CSS it is not possible. As I said, we need to know the height at some point. — Guilherme Oderdenge, Jul 03 '13 at 13:17
Ok, accepted your answer, I guess there has to be a Starting point somewhere. But one last thing, how the heck does this work on other browsers properly..??? :-/ — LearningDeveloper, Jul 03 '13 at 13:24
They are modern browsers with the power to calculate the height dynamically by itself. — Guilherme Oderdenge, Jul 03 '13 at 13:29
K.. Fair enough.. Thanks for clearing this doubt for me **chiefGui**.. :) — LearningDeveloper, Jul 03 '13 at 13:32

score 1 · Answer 2 · answered Jul 03 '13 at 12:47

1

try this

#outputCode{
width:100%;
height:100%;
}

answered Jul 03 '13 at 12:47

Rajendra Khabiya

1,990
2
22
39

1

if it is inside a div than 100% height means height of the parent div...instead of 100% use a static height like 250px it also not effect responsive css beacuse vertical scroll is allowed in responsive css...so try with a fixed height – Rajendra Khabiya Jul 03 '13 at 12:57
Yeah, did try that, it's working, but I wanted it in **%** so that it displays to a certain height of the page. Is it possible? – LearningDeveloper Jul 03 '13 at 13:06
1

if you want to display height of textarea it's parent tag will be body or a div whose height will be 100%... when ever we give css in % it initiate from its parent element – Rajendra Khabiya Jul 03 '13 at 13:14

score 0 · Answer 3 · answered Jul 03 '13 at 12:43

0

You haven't declared a height, add in a "height: 80%", you have just said what the max can be and the min can be - it doesn't intrinsically know what it should be in between.

answered Jul 03 '13 at 12:43

Oli Fletcher

309
4
15

seems to work okay for me, what version of IE are you testing in? Could always try declaring html, body and container with a height of 100%? – Oli Fletcher Jul 03 '13 at 12:56
I'm using IE9, have added **height: 90%** in **textarea**, still no difference. Only 1 line of Text Area is being displayed. – LearningDeveloper Jul 03 '13 at 12:59

Display textarea size consistently in all Browsers

3 Answers3

Updated

Percentage comprehension

JavaScript alternative