Updates from QA Training

The ever expanding text area

In the current release of all desktop browsers (except IE9) something odd has happened to text area controls. All of a sudden we have resizable text areas with absolutely no constraint in how big they can get. This of course will play merry hell in the flow of your document.


David Walker | 27 June 2012

In the current release of all desktop browsers (except IE9) something odd has happened to text area controls. All of a sudden we have resizable text areas with absolutely no constraint in how big they can get. This of course will play merry hell in the flow of your document.

The textarea bydefault is taking advantage of a CSS3 feature called resize. Any block element could have the following CSS added to it so a textarea is now coming as default as if I had done this:

                textarea {

                                resize: both;

                                 overflow: hidden;

                }

A pretty swanky piece of easy CSS for those accordion style displays but you often want to control it.  There are two ways you can deal with this:

1. Switch it off

If you dislike the idea of user s being able to resize the box or want a consistent experience do the following:

                textarea {

                                resize: none;

                }

This means everything behaves the same as it ever was.

2. Constrain it

Personally I do not mind the resizing concept I just want it to be constrained to the proportions of the parent element more effectively.  If you want to give users the ability to resize but constrain their power try:

                textarea   {

                            max-width: 450px;

                            min-width: 350px;

                            max-height: 250px;

                            min-height: 150px;      

                 }

Or switch to resize on one axis only be using resize: horizontal; or resize: vertical;


David-Walker---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.