Elastic textarea in IE is tiny when empty

[spalger]

We are experiencing an issue in IE: elastic/kibana#4048

Basically, IE sets the scrollHeight of an empty textbox to 0 rather than the line height, but will return the proper height if the value is even just a space (new lines didn't seem to work). So, we set config.append = ' '; and called it a day. It may make sense to fix this in the library though.

app.config(['msdElasticConfig', function(config) {
  config.append = ' ';
}])

[sandcastle]

We are also seeing the same issue.

[viljark]

Fixed this issue by specifying min-height value for my textarea.

[spalger]

@viljark to something like 1em? In order to have it match other browsers we had to set it to some arbitrary px value.

[viljark]

@spalger I set it to the same value that my initial height value in CSS was (in px).

[pixelsailor]

line 77 is the problem

minHeight = Math.max(minHeightValue, heightValue) - boxOuter.height,

The core issue is two-fold: 1) IE evaluates the heightValue (line 76) as 0 (Chrome and Firefox come back as Nan) and 2) IE will again return 0 for mirror.scrollHeight (Chrome and FF get the computed height: 38).

On line 168, mirrorHeight gets set to minHeight (which is now negative due to boxOuter.height) and then added to itself, making it 0 again.

Simple fix is just to set a default height for the minHeight should it initially come back as 0. I opted for 38 since that was the default height given by Chrome when the textarea had no height defined.

minHeight = (heightValue !== 0) ? Math.max(minHeightValue, heightValue) - boxOuter.height : 38,

[oliverguenther]

@viljark
Fixed this issue by specifying min-height value for my textarea.

Can confirm that setting an explicit min-height that the textarea should not shrink below works fine for IE 10/Edge

[gvlekke]

We also have this issue in IE11

[Gargaroz]

Still experiencing this issue in IE11 but the solution provided by @spalger doesn't fix it, the one suggested by @viljark did it tho

[kirill-sokolov]

i have the same problem in IE11 and i fixed it as @viljark suggested

[monospaced]

CSS fix FTW