CODEWITHSUNDEEP
csstextareawidth
tim92109
tim92109

Reputation: 102

Possible to have an initial width of textarea but leave it adjustable?

I have a floating textarea where the user can adjust it to whatever width and height they want. Upon clicking a submit button, I used jQuery to grab the styles (width, height, & margin) that is pulled into the style attribute when the user resizes the textarea. That is then transferred to a hidden input that posts the value - so that when the page loads after submitting, there is a variable that can be placed back into the textarea style ($_POST['styles']). This works great except the textarea can't be adjusted to a smaller width for some reason. It can be made bigger, but not smaller than the width that is originally placed in the style of the textarea. Height works fine in that aspect. So if the user adjusts the width to the entire width of the page, then hits submit, they're stuck with a textarea that's 100% the width of the page.

I've tried another jQuery statement that removes the width, but that shrinks it down to the default smallest size. So does 'width:auto'. I would expect, since the width is placed into the textarea on page load with PHP, that it wouldn't be 'set in stone' after. But it is. Any other option for creating an initial width of the textarea, but leaving it adjustable?

Upvotes: 0

Views: 502

Answers (1)

mahfuz
mahfuz

Reputation: 3223

Use jQuery UI resizable()
Inside it you can call the resize event to set hidden field value.

Working example https://jsfiddle.net/icecred/Lco2gkh3/6/

HTML:
<textarea></textarea>

CSS:

textarea {
    height: 250px;
    width: 200px;
}

JS:

$("textarea").resizable({
    resize: function(e) {
        // on resize: set hidden input value
        var height = $(this).css('height');
        var width = $(this).css('width');
        // set hidden input value here
    }
});

Upvotes: 1

Related Questions