Databases
StackOverflow2013
Postsdbo
PODisplay textarea size consistently in all Browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay textarea size consistently in all Browsers
    text
    copied!<p>I've got a slight issue with the below code in IE.</p> <p>The design is perfect in Chrome and Firefox but IE renders the <em>textarea</em> size very small. I want it as it looks in Firefox or Chrome.</p> <p>It might be a duplicate of<br> <a href="https://stackoverflow.com/questions/2038732/consistently-sizing-a-textarea-under-ie-ff-safari-chrome">Consistently sizing a &lt;textarea&gt; under IE, FF, Safari/Chrome</a><br> OR<br> <a href="https://stackoverflow.com/questions/2906075/firefox-ie-textarea-sizing-quirk-workarounds">Firefox / IE textarea sizing quirk - workarounds?</a><br> but there are no proper solutions mentioned. So I started this.</p> <p>I'm sure that jQuery can sort it out but I want only CSS in my page, Is there any proper <strong>CSS</strong> solution to it??</p> <p><em>I'm not able to log into jsFiddle, so, no jsFiddle guys..</em> :(</p> <pre><code>&lt;!DOCROOT html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Code Compressor&lt;/title&gt; &lt;link href="styles.css" rel="stylesheet" type="text/css" /&gt; &lt;style type="text/css"&gt; .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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="column"&gt; &lt;div&gt;Input Source:&lt;/div&gt; &lt;textarea id="sourceCode" name="sourceCode" &gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div&gt;Compressed Output:&lt;/div&gt; &lt;textarea id="outputCode" name="outputCode" &gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class="center"&gt; &lt;input type="button" id="compressButton" name="compressButton" value="Compress" onClick="compress" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload