By stephenau on

Textarea in 4.7 is unmanageable in IE. It will expand beyond the right border of the browser.

Finally I got it fixed!! Just add 1 line in the file 'misc/textarea.js' will fix it.

Inside function textArea(element) / lines 44 - 50 of the file 'misc/textarea.js' :
.
.
// Set wrapper and textarea dimensions
this.wrapper.style.height = this.dimensions.height + this.grippie.dimensions.height + 1 +'px';
this.element.style.marginBottom = '0px';
this.element.style.width = '100%';
this.element.style.margin-left = '0px'; // ADDING THIS LINE WILL FIX THE TEXTAREA WIDTH PROBLEM!!
this.element.style.height = this.dimensions.height +'px';

⋅ Categories: Drupal 4.7.x

Comments

jeff h’s picture

jeff h commented

Thanks for sharing this. Unfortunately it didn't help me, but I thought I also would share something related.

My site doesn't have space for the textarea to be 80 columns wide. My CSS specifies a width for the textarea, but there was a flash in every browser as the textarea is initially drawn at 80cols, then resized as the CSS took control of things.

In IE this caused major hassles, as that browser used the wide version in its width calculations on the containing DIV, even though the CSS was reducing the width to something manageable.

Fortunately this can be changed in theme_textarea. I put the following in my template.php to limit all textareas to 30 columns:

 /**
 * Format a textarea. As per CORE but limited to 30 columns
 *
 * @param $element
 *   An associative array containing the properties of the element.
 *   Properties used: title, value, description, rows, cols, required, attributes
 * @return
 *   A themed HTML string representing the textarea.
 */
function phptemplate_textarea($element) {
  $class = array('form-textarea');
  if ($element['#resizable'] !== false) {
    drupal_add_js('misc/textarea.js');
    $class[] = 'resizable';
  }

  if ($element['#cols'] > 30) {$element['#cols'] = 30;}

  $cols = $element['#cols'] ? ' cols="'. $element['#cols'] .'"' : '';
  _form_set_class($element, $class);
  return theme('form_element', $element['#title'], '<textarea'. $cols .' rows="'. $element['#rows'] .'" name="'. $element['#name'] .'" id="' . $element['#id'] .'" '. drupal_attributes($element['#attributes']) .'>'. check_plain($element['#value']) .'</textarea>', $element['#description'], $element['#id'], $element['#required'], form_get_error($element));
}

_________
http://marmaladesoul.com

dataknack’s picture

dataknack commented

This fix worked for me. Thank you!

stephenau’s picture

stephenau commented

I use theme spreadfirefox and changed it to 2 columns with all the contents shown on the right. After many hours trial and error, I found that modifying textarea.js can not fix all the problem. It still does not work on some situations. However, the following can solve ALL my textarea width problems so far.

I restored the original textarea.js and changed the page.tpl.php in theme spreadfirefox:
Original code -

            <!-- start main content -->
	    <span style="width: 100%;"><a name="content"></a></span>
            <?php print($content) ?>
            <!-- end main content -->

Changed to -

            <!-- start main content -->
	    <span style="width: 100%;"><a name="content"></a></span>
            <fieldset style="width:98%;background-color:transparent;border:none;padding:0;">
            <?php print($content) ?>
            </fieldset>
            <!-- end main content -->

The width of FIELDSET cannot be 100% on my site but 98% works perfectly.

grub’s picture

grub commented

Thanks Stephen,

This fixed the textarea problem for me using drupal 4.7, on a 3 column spread firefox theme, i also had to add the forms_no_js module to fix the breaking issue.

Ben.

dirtabulous’s picture

dirtabulous commented

Worked out great, thanks. Good fix.
Bert

MsDetta’s picture

MsDetta commented

I'm using bluemarine which has been modified to tableless 2-column layout with navigation on the left and content on the right. All of the textarea input fields disappeared, and I found them at the bottom of the page not even inside the form!

I tried all of the above solutions, but none of them fixed the problem for me. After much trial and error, I finally figured out that it's the .resizable-textarea .grippie that was causing the text area to shift to the bottom. While the grippe will allow you to resize the height, it does not allow you to resize the width. My CSS modification is:

form .resizable-textarea {
width: 50%!important;
display: inline !important;
margin-top: 20px;
position: absolute;
margin-bottom: 0px !important;
}
form .resizable-textarea .grippie {
height: 1px;
width: 50% !important;
background: #eee url(grippie.png) no-repeat 50% 50%;
border: 1px solid #ddd;
border-top-width: 0px;
display: block !important;
}
#edit-help {
clear: both;
margin-top: 100px;
}
bjaspan’s picture

bjaspan commented

See http://drupal.org/node/101305 which has a patch for this problem.