Turn off Chrome's textarea resizing

When building forms for websites, much time can be spent making sure that all the elements fit together in a nice way, all lining up and looking neat. So then along came Google's Chrome browser and with it came the ability to drag resize a text area to any size possible. Great. Great?

While the ability to resize the text are to be the right size for the content being entered is a great feature, the need to do it on a well designed and styled site may make everything mess up. A well designed form should anticipate the users need and supply forms that are able to fit the data they are collecting.

Luckily you can disable it easily with one line of styling.

1textarea{ resize: none } 

Alternatively you could anticipate the need for bigger text areas and constrain the user's resizing to a value that will fit your design. You can even constrain to just one axis by setting a min and max width/height. The following would allow a textarea to be resized to 400px high but the width would always be fixed to 200px.

1textarea{ max-width: 200px; min-width: 200px; max-height: 400px; } 

Now you have the ability to make sure your textareas behave just how you want them to. Just make sure you consider the types of data that the users will be putting in them and they need to resize shouldn't even be an issue.

Other posts

Tagged with