Thursday, April 21, 2011

Chrome : make textareas which are not resizable

By default, Chrome makes my textareas resizable. I wish to control this and either make them only vertically resizable, or not at all.

How can I achieve this ?

From stackoverflow
  • Set max-width to make them only vertically resizable, or set max-height and max-width to stop all resizing.

    However, be aware that breaking user expectations about how their browser treats controls tends to create a lot of user frustration.

  • you can set the column and rows like

    <%= text_area :object, :attribute, :rows => '10', :cols => '100' %> 
    #=> <textarea cols="100" rows="10" id="object_attribute" name="object[attribute]">
    #      #{@object.attribute}
    #   </textarea>

    or specify the size like

    <%= text_area :object, :attribute, :size => "10x100" %> 
    #=> <textarea cols="10" rows="100" id="object_attribute" name="object[attribute]">
    #      #{@object.attribute}
    #   </textarea>
  • Rails generate standard textarea tag, but Safari/Chrome (Webkit) display all (not only Rails :) textareas as resizable.

    It's apperance may be disabled by CSS

    textarea {
        resize: none;

    Or, if need only vertical resize:

    textarea {
         resize: vertical;


Post a Comment