Menu
How to add resizer to textarea in IE the same as in Chrome and Firefox?
jQuery.resizable() won't work for me.
438
Let me show how to control textarea resizing with CSS. Textarea resize control is available via the CSS3 resize property: Allowable values self-explanatory: none (disables textarea resizing), both, vertical and horizontal. The default in Firefox, Safari, and Chrome is both.
The css resize property is not (yet) supported by IE. You may want to try this jquery ui plugin: http://jqueryui.com/demos/resizable/. Here's a fiddle to demonstrate. For your second question regarding printing in IE. Try add the following CSS to the media="print" block:
Remove resize handle WebKit browsers attached a little UI element to the bottom right of text areas that users can use to click-and-drag to resize a textarea. If for whatever reason you want to remove that, CSS is all it takes: textarea { resize: none; }
WebKit browsers attached a little UI element to the bottom right of text areas that users can use to click-and-drag to resize a textarea. If for whatever reason you want to remove that, CSS is all it takes: 6. Add resize handle jQuery UI has a resizeable interaction that can be used on textareas.
Internet Explorer (and Microsoft Edge, as of May 5, 2016) do not support native gripper/resizing on textarea elements. While these may eventually be supported in the future (in Microsoft Edge), the best option you have for now is to polyfill the functionality.
Many options exist online that do this, but if you're using jQuery and jQuery UI, you could use the Resizable widget:
$("textarea").resizable({
handles: "se" // place handle only in 'south-east' of textarea
});
By default, this places the handler beneath the textarea. I didn't like this:
.ui-resizable-handle {
transform: translateY(-100%);
}
You can see the end-result here: http://jsbin.com/rumokazepo/edit?html,css,js,output
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
