4

Currently working on cross-browser compatibility came across the problem with range of IEs.

I need the textarea of such height that it would render given text without scrollings. So I count lines of such text on the server side and on the front-end get:

<textarea rows="15">...</textarea>

So far it works with Chrome, FF & Opera:

Chrome 24.0.1312.57 m

But no such luck with IE8:

IE8

and IE9:

IE9

Is there anyway to fix it besides JS? Got HTML5 doctype and would like to keep my font-size value untouched.

Computed style of textarea:

background-color: rgb(255, 255, 255);
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
color: rgb(167, 169, 172);
cursor: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
height: 300px;
letter-spacing: normal;
line-height: 20px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
width: 432.546875px;
word-spacing: 0px;
word-wrap: break-word; # changed to «pre» for IE
writing-mode: lr-tb;
jibiel
  • 8,175
  • 7
  • 51
  • 74
  • Do you use any css that might apply to the textarea? – Arjan Feb 11 '13 at 22:30
  • @Arjan tons of. Please see my updated question. – jibiel Feb 11 '13 at 22:43
  • Found out that `line-height: 20px` is causing the problem. One way to normalize it across browsers is default `line-height: normal` but what if I need other value? – jibiel Feb 11 '13 at 23:57
  • Why are you using `textarea` to *display* text? The element is designed for *user input*. It was used for creating scrollable areas long, long ago, before CSS became available, but here you aren’t doing even that – you specifically want to avoid scrolling. Using the `pre` element would make things easier. – Jukka K. Korpela Feb 12 '13 at 04:55
  • @JukkaK.Korpela I need those text to be editable. – jibiel Feb 12 '13 at 10:38
  • @jibiel, won’t the `contenteditable` attribute do? – Jukka K. Korpela Feb 12 '13 at 12:12
  • @JukkaK.Korpela interesting, thanks. And how do I submit it? I need a `form`. – jibiel Feb 12 '13 at 12:19
  • If you need to submit it (the question only describes display issues), then it’s natural to use `textarea`. Using some other element, you would need to copy its content into a hidden field with JavaScript, as the first step in submitting the form. – Jukka K. Korpela Feb 12 '13 at 12:25

4 Answers4

1

Turned out that line-height: 20px is causing the problem. One way to normalize it across browsers is default line-height: normal but what if I need other value? Thus JavaScript remains only solution it seems. Here's some jQuery code:

<!--[if IE]><script src="ie.js" type="text/javascript"></script><![endif]-->

$(document).ready(function() {

  var textArea = $('textarea'),
      lineHeight = parseFloat(textArea.css('lineHeight'));

  textArea.height(lineHeight * textArea.attr('rows'))

})
jibiel
  • 8,175
  • 7
  • 51
  • 74
0

Maybe try calculating what the CSS height would be and add that to the box's inline style as well.

moettinger
  • 4,949
  • 2
  • 15
  • 20
  • You was right all along. See my [answer](http://stackoverflow.com/a/14830439/535406). I'll accept yours because it was the first. Thanks! – jibiel Feb 12 '13 at 10:36
0

I suppose the style sheet does not actually contain white-space: pre, since that would break the default rendering of textarea (which honors line breaks). Other than that, I don’t see why the problem would appear in Standards Mode.

I’m assuming that the HTML markup (which was not disclosed) contains the </textarea> end tag immediately after the last text line. Otherwise, browsers would imply that there is an empty 16th line in the content. (This browser behavior violates the HTML 4.01 spec which says that a newline immediately before an end tag shall be ignored, but what can you do?) But if this were the problem, it would appear e.g. on Firefox, too.

The setup where the height property of textarea is set to 300 pixels, which equals the number of lines (15) times the line height (20 pixels), is correct.

However, in Quirks Mode, IE misbehaves: it interprets the height attribute value as specifying the height of the total area occupied by the element, including padding and border. The 4px top and bottom padding and the 2px borders would thus require height: 310px. This in turn would cause excessive spacing in conforming browsers. So it’s best to work in Standards Mode. Check whether there is some typo in the doctype string. In IE, you can use F12 to enter Developer Tools, where you can inspect the properties and also see the mode of the browser.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

Referring to jibiel's answer (cannot comment yet due to lack of points).

Here's the code for correcting the heights of all textareas that have a row Attribute:

$("textarea[rows]").each( function() {
 $(this).css('height', parseFloat($(this).css('lineHeight')) * $(this).attr('rows') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
S.P.
  • 1
  • 1