Oct 14, 2007

Smarter resizeable textareas in Safari

Did you notice the resize handle textareas have in Safari? They come  very often as many pages underestimate then size you need for those boxes.
However, resizing a text area mostly break the design of the page, but I stumbled upon a very easy way to fix it for your page to make it look perfect every time.
Remember the min-width, max-width properties in CSS? Good, because Safari uses them to deside how big the textarea is allowed to be.
For example, if you don't want the user to change the width of the textarea, and you don't want the the height to be smaller than a certain number, just put this into your CSS

textarea {
width: 300px;
min-width: 300px;
max-width: 300px;

height: 200px;
min-height: 100px;
}

now, Safari forces the width to be 300px, and it can't get a height less than 100px. It's a great way to take avantage of the Safari's cleaver function.



2 comments:

Anonymous said...

you can use resize: vertical;
for this behaviour

Anonymous said...

My friend and I were recently discussing about technology, and how integrated it has become to our daily lives. Reading this post makes me think back to that debate we had, and just how inseparable from electronics we have all become.


I don't mean this in a bad way, of course! Societal concerns aside... I just hope that as technology further advances, the possibility of copying our memories onto a digital medium becomes a true reality. It's one of the things I really wish I could experience in my lifetime.


(Posted on Nintendo DS running [url=http://kwstar88.livejournal.com/491.html]R4[/url] DS rrPost)