8

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?

17

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) ;
}
6
  • 1
    The same can be done with a module; in that case the module needs to implement hook_theme_registry_alter() implementation. To notice the code cannot call theme('textarea'), or it would cause an infinite loop; it needs to call theme_textarea(), or the theme function that has been set from another module as replacement of theme_textarea(). – kiamlaluno Mar 26 '12 at 13:08
  • Thanks for the snippet, but I wasn't able to get it to work. I should just be able to replace THEMENAME with my theme folder's name and place the code into template.php, right? I tried this with Bartik as well but I wasn't able to get it to work. I flushed the cache twice after updating the file. – Patrick Kenny Mar 26 '12 at 13:45
  • 2
    Hmm it should work, try unset($element['#resizable']); instead of $element['#resizable'] = false;. If you look at the code for theme_textarea() that should definitely work – Clive Mar 26 '12 at 13:56
  • 3
    I found that $element contains an array called element, so this worked: $element['element']['#resizable'] = false; – Derek Ahmedzai Sep 20 '13 at 14:04
  • Edited answer as per Derek Ahmedzai's comment. – jamix Feb 20 '14 at 17:20
4

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 }
1

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.

1

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

1

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',
);
0

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".

0

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;
 }
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.