Issue:
Create a form with a text-area field inside a DIV element. Set the DIV to use white-space: Set the text-area field to a fixed width or percentage of page width. Create a sentence longer than the field width of the text area box. Use inspect element in Firefox or Chrome and compare to IE 11.
Firefox 38, 39, and Chrome 43 don't exhibit this issue. Safari 8 doesn't either.
Note: This is similar to using a PRE element, where FF and Opera browsers don't automatically scroll or wrap contents.)
Work-around:
The solution is to override the parent by updating the TEXTAREA elements CSS w/ a white-space setting of "white-space: pre-wrap;".
This also seems "safe" to do for the other browsers so you don't have to do an IE specific hack either.
Example:
PRE/DIV Element:
-moz-boxsizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
padding: 30px;
width:100%; overflow-x: auto;
white-space: -moz-no-wrap;
white-space: -o-no-wrap;
white-space: no-wrap;
TEXTAREA Element:
white-space: pre-wrap;
word-wrap: break-word;
previous page
|