How can I prevent text areas from being resizable?

Question

Text areas in Drupal 7 are resizable by default. I would like to turn this off, but when I checked a text area with Firebug, I couldn't find the CSS that was making it resizable.

How can I prevent text areas from being resized?

Answer 1

It's JS that makes the text areas resizable, not CSS. I think the simplest way to disable this behaviour for all textareas is to implement THEMENAME_textarea() in your theme and remove it there:

function THEMENAME_textarea($element) {
  $element['element']['#resizable'] = false ;
  return theme_textarea($element) ;
}

Answer 2

If you only need CSS3 compatibility, you can use the following CSS:

textarea { resize: none; }

Or if you need to disable resize on a specific textarea, add the ID of that text area:

.edit-body-und-0-value { resize:none }

Answer 3

Overriding this in the theme is a last minute change, which modules won't have a chance to react on.

It's just as easy to do this via a module and a #process callback:

/**
 * Implements hook_element_info_alter()
 */
function custom_element_info_alter(&$types) {
  $types['textarea']['#process'][] = 'custom_process_textarea';
}

/**
 * A custom callback to disable "grippies" on textareas.
 */    
function custom_process_textarea($element) {
  $element['#resizable'] = FALSE;
  return $element;
}

This gives modules like Wysiwyg a chance to notice that a textarea should not have a grippie, so it can avoid to attach that behavior when disabling an editor.

Answer 4

Implement this in your THEME. It will force the #resizable to FALSE and prevent the JS and markup from rendering.

/**
 * Implements template_preprocess_textarea().
 */
function THEME_preprocess_textarea(&$variables) {
  // Hide grippie.
  $variables['element']['#resizable'] = FALSE;
}

The accepted answer is close but theme_* functions shouldn't be called directly as they may bypass process/preprocess functions unintentionally

Answer 5

You can add custom inline CSS to your form, to hide the grippies:

$form['#attached']['css'][] = array(
  'data' => '.resizable-textarea .grippie { display: none; }',
  'type' => 'inline',
);

Answer 6

A new module called Disable Resizable Textarea was release now.

This is a simple module that add ability to override the default #resizable property of textarea fields. By default, all textareas are resizable. This module allows you to disable this feature on each field.

It is very easy to set up. Just edit the desired field and you will see an "Disable #resizable property of this textarea" option. You can also disable resizable from its summary, if the field is of type "Long text with summary".

Answer 7

You can do form alter of node or comment.

Check out the sample code and comments below:

$form['body'][LANGUAGE_NONE][0]['value']['#resizable'] = FALSE;

For mozilla and chrome, we can still see the issue. place css hack.

textarea {
 resize: none;
 }

Answer 8

I was recently solving this problem too and found out these 2 solutions:

First one I prefer the most: Use this code in your theme's template.php and all grippies and textarea.js will disappear:

/**
 * Override of theme('textarea').
 * Deprecate misc/textarea.js in favor of using the 'resize' CSS3 property.
 */

function THEMENAME_textarea($variables) {
  $element = $variables ['element'];
  element_set_attributes($element, array('id', 'name', 'cols', 'rows'));
  _form_set_class($element, array('form-textarea'));

  $wrapper_attributes = array(
    'class' => array('form-textarea-wrapper'),
  );

  $output = '<div' . drupal_attributes($wrapper_attributes) . '>';
  $output .= '<textarea' . drupal_attributes($element ['#attributes']) . '>' . check_plain($element ['#value']) . '</textarea>';
  $output .= '</div>';
  return $output;
}

Don't forget to change THEMENAME to your theme name and flush all caches.

Second way is to install module Disable resizable textarea but I try to keep number of modules in my installations as low as possible.