I need to build a textarea element with a predetermined default size that can be resized by the user within specific limits allowing both expansion and reduction.
I have experimented with adjusting the resize, min-width, max-width, and width properties of the textarea, but so far, users are only able to enlarge the textarea, not shrink it. The browser restricts resizing within the parameters set by width and max-width, rather than between the boundaries defined by min-width and max-width.
Is there a way to specify a default size without it being considered as the minimum size?
This is the code I'm currently using:
function textAreaWithDefault(size) {
var ta = document.createElement("textArea");
ta.style.resize = "both";
ta.style.minWidth = "100px";
ta.style.width = size + "px"; // default size
ta.style.maxWidth = "500px";
document.body.appendChild(ta);
}
An approach relying solely on CSS and/or JavaScript is preferred, with compatibility required for web-kit browsers.