CODEWITHSUNDEEP
htmlcss
LearningDeveloper
LearningDeveloper

Reputation: 668

Display textarea size consistently in all Browsers

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>

Upvotes: 3

Views: 6903

Answers (3)

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

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

Upvotes: 2

Rajendra Khabiya
Rajendra Khabiya

Reputation: 2030

try this 

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

Upvotes: 1

Oli Fletcher
Oli Fletcher

Reputation: 309

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.

Upvotes: 0

Related Questions