Help please!Dina, you’re right. i am learning Web designing, i was just searching On “resizing” i found this article, which is really useful that Auto Resize, it will gonna save more time n Progress in this way! Stack Overflow works best with JavaScript enabled
FireFox will provide this same capability in Firefox 4. textarea { width: 80%; height: 20%; } what ever percentage you want for width and height. To prevent a text field from being resized, you can use the CSS resize property with its "none" value. Perhaps I am doing something wrong? And I agree if I were packaging this as a plugin or in a library the DIV would get added dynamically on the target textarea/input viaThis should become default functionality in browsers. You are using bootstrap so you may need to override the css for textareas that bootstrap has otherwise its justwhat ever percentage you want for width and height. If that cancelled after each key-up that would make me very tired :-D But great idea with the cloned element.I’m going to remove the manual resize ability, and then allow developers to change the CSS if they want.A difficulty of your solution in case of several textareas or if you want to turn it to a generic system is the way you prepare your clone: by applying fixed styles. It did not work pretty great at the first go albeit when I applied the same padding, borders etc – worked!I added little fix enter. I’m also going to reduce the line-height on the
element so it’s not such a large gap.I am new to JS and CSS, and I need to use your script in a project I am currently working on. :)I played with the line-height and small and big copy paste text, but could not get it to work in every situation.Think I will set a fixed width for every device, that causes no problems.It looks ok to me at different widths. If you can create a demo and show it to me, that would be great.When I use textarea width:50% (responsive site) and I copy-paste a large text inside the textarea, the text does not show completely (it scrolls).Change it to a unitless line-height, something like:That should correct it. To be specific, if the Texarea already contains some text when the document is loaded and if this text exceeds the TA’s bounds, the TA does not expand. Looks like I didn’t think it through properly.Here’s a corrected version, with multiple textareas:I will eventually updated the post to fix this bug. It seemed like a simple task.
I can’t wait to use it on my blog.Hey! This will maintain the minimum of 50 and expand/contract as needed:scrollHeight is supported in IE8+, so if someone needs support below that, then it might not work.But… I tested it in IE8 in IE7 mode, and it seems to work exactly the same way as IE8. I had to fix the same issue at work just last week. The one bonus of James’s is that it actually works on input elements too, for expanding the width as you type.But I’m hesitant to recommend a plugin for this solution that’s 275 lines long. Of course this is because the script is bound to the keyup event only and so far when loading, no keys are released.How the script works now makes sense if the assumption is that users are only allowed to type “after” the document has been loaded and the script bound to the component, but not allowed to have a “pre-populated” text area.At the moment I solve this by simply repeating what you do in the bind function but without binding anything, just doing the copy into div, get height, copy back the height thing. its hiding first linesof text when i type more lines in my textbox. ( Sorry for the google translation of the kkk ).here is a bit i have added to this code check it outIf you just type characters consecutively with no carriage returns, it still grows.
Thanks.I have to admit, after examining this code a little closer, this really is a great solution.
The