TinyMCE Sizes Incorrectly In Many Instances

thanks for the wonderful module.

I just wanted to report the same issue -- so this problem does exist and is legitimate.

Basically: When I use the Firefox browser, I get a scrollbar underneath the text area -- so I cannot read the entire text that I have typed in at one time.

This problem disappears using Internet Explorer.

You can see this on my web site, if you try and add a comment to the front page or any blog posting (you actually have to register to add comments):

www.ithou.org

FYI, this is what I'm using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

And the interesting thing is that the scroll bar only shows up *after*you click on the tinymce text editing box and attempt to enter text. (Before you enter in any text, there is no scrollbar.)

Good luck!
Albert Wong
www.ithou.org

I can confirm this issue using Safari 2.0 and Camino 1.0 as well.

same issues here on 4.7.0. Content is centred in firefox on occassion and quite often the tinymce editor needs to be resized by the user before its usuable.

Is there a default size that can be set ?

What a shame....such a great module and this bug makes it unusable! I hope this bug gets some attention soon.

I just discovered something, when I switch over to the default theme (pushbutton) tinymce displays correctly. It looks like I spoke too soon, the problem is with the theme perhaps being fixed width or whatever, but its def not a tinymce problem.

but its def not a tinymce problem

But if you drag the area a little bigger or smaller, the editor suddenly fills it correctly. I am not sure the theme is the only thing to blame then.

Bastiaan Veelo.

Also, when setting the default editor to advanced the editor window doesn't even provide room for content when creating events (presumably the toolbars are taking up all of the space).

That's because the textarea on submit event page has only 5 rows (that's drupal's form default).

I have found a solution that works for me.

Just open event.module file, jump to the function event_form_alter (line 1795 in drupal 4.7) and add the following line at the beginning:

$form['body_filter']['body']['#rows'] = 20;

Possible Fix

I believe this problem is related to your theme body tag css. TinyMCE uses the body tag properties to display the editable region inside itself. Try setting the body css width property to 100% in your theme style.css. If this screws up your theme layout just assign the current body css to an identifier (ie #main_body) then assign that id to your body tag in your theme.

Seems to work ok for me now after doing this in firefox and ie.

Another Setting is Needed to fix this.

If your are using a PHP Template Theme you can put the following function in your template.php file (create one if you don't have one) to set the TinyMCE Init parameters. Setting the width parameter to 100% using this function should fix the problem in conjunction with setting the body tag width to 100% as I described above OR you can set the body tag width in the TinyMCE Theme CSS in "modules/tinymce/tinymce/jscripts/tinymce/themes/advanced/editor_content.css" .

/**
 * Customize a TinyMCE theme.
 *
 * @param init
 *   An array of settings TinyMCE should invoke a theme. You may override any
 *   of the TinyMCE settings. Details here:
 *
 *    http://tinymce.moxiecode.com/wrapper.php?url=tinymce/docs/using.htm
 *
 * @param textarea_name
 *   The name of the textarea TinyMCE wants to enable.
 *
 * @param theme_name
 *   The default tinymce theme name to be enabled for this textarea. The
 *   sitewide default is 'simple', but the user may also override this.
 *
 * @param is_running
 *   A boolean flag that identifies id TinyMCE is currently running for this
 *   request life cycle. It can be ignored.
 */
function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {

  switch ($textarea_name) {
    // Disable tinymce for these textareas
    case 'log': // book and page log
    case 'img_assist_pages':
    case 'caption': // signature
    case 'pages':
    case 'access_pages': //TinyMCE profile settings.
    case 'user_mail_welcome_body': // user config settings
    case 'user_mail_approval_body': // user config settings
    case 'user_mail_pass_body': // user config settings
    case 'synonyms': // taxonomy terms
    case 'description': // taxonomy terms
      unset($init);
      break;

    // Force the 'simple' theme for some of the smaller textareas.
    case 'signature':
    case 'site_mission':
    case 'site_footer':
    case 'site_offline_message':
    case 'page_help':
    case 'user_registration_help':
    case 'user_picture_guidelines':
      $init['theme'] = 'simple';
      foreach ($init as $k => $v) {
        if (strstr($k, 'theme_advanced_')) unset($init[$k]);
      }
      break;
  }

  // Add some extra features when using the advanced theme.  
  // If $init is available, we can extend it
  if (isset($init)) {
    switch ($theme_name) {
     case 'advanced':
	   $init['width'] = '100%';
       break;
	   
    }
  }

  // Always return $init
  return $init;
}

There are a ton of other parameters you can set. Please refer to this document for them.

Hope this helps 8-)
-------------------------
Vince

Vince... this is friggin' awesome. Thanks.

Perfect fix.

Albert
www.ithou.org

Well, vince's fix kind of works for me. I was having the problem of tinyMCE spanning really far in Firefox but not in IE(yeah I know this is a first for me, normally it's the other way around). So I added the template code discussed and it kind of fixed the problem in firefox, although it messed up Internet Explorer. So I added the additional code to try and remedy the problem:

// Add some extra features when using the advanced theme.
// If $init is available, we can extend it
if (isset($init)) {
switch ($theme_name) {
case 'advanced':
	if(get_browser()->browser == 'Mozilla')
	{
		$init['width'] = '1px';
	}
	else
	{
		$init['width'] = '100%';
	}
break;

}
}

Now if you look at my attached screen shots it works fine for IE now, but is still kind of messed up for Firefox, and I'm not quite sure why, I set it to 1px because that is the lowest I could make it and have it work. Before tinyMCE was spanning like a 1000+ pixels wide and I have no idea why.

This is on firefox 1.5.0.6.

My IE screenshot....

I used to have TinyMCE problems but it turned out that I had too many plugins installed that where screwing things up. Used a fresh install of Mozilla (since I really liked my plugins) and there where no problems with TinyMCE, you may won't to have this in mind it might have something to do with some of the problems.

Well after scouring the forums for a while, messing with my CSS, trying to override template functions, setting the toolbar to the bottom I didn't have much luck. Then I decided to turn off resizing right in the tinyMCE's settings via drupal module configuration and IT WORKED! I removed all my CSS stuff and template function overrides and it is still working fine. So my guess is, that it's something messed up with that code.

I'm having a similar problem, but effects only Windows 2000 - it works perfectly fine in Windows XP.

In Win2k Firefox 1.5, the editor is wider than the screen, with the same padding effect explained by the OP.

In Win 2k IE 6.0, the editor is wider than the screen, totally breaks the template, with the same padding effect. Everything returns to normal as soon as rich-text is disabled.

Yet... in WinXP Firefox 1.5 and IE 7.0, everything works perfectly as expected.

I have tried all suggestions in this thread, and it's had no effect.

I have noticed that it doesn't behave like that on my "super simple" profile (which just has bold, italic, lists and links). I'll now go through the pain staking process of finding out which buttons and plugins are causing the problem.

I have since moved to FCKeditor(http://drupal.org/project/fckeditor) and found it way better than tinyMCE. It has solved all my tinyMCE problems (this, formatting problems, image insertion, etc). I suggest maybe giving it a whirl and seeing if it fits your needs.

#9 by vince works for me. THANKS!

http://drupal.org/node/130305

  if (isset($init)) {
    $init['width'] = '100%';
  }
  return $init;

in #9 worked for me when the tinymce text field seemed to be defaulting to the minimum size in fieldsets that were collapsed by default.

#8 by Vince fixed the horizontal scrollbar for me. I assigned an ID to the body tag in page.tpl.php and changed the corresponding CSS selector in style.css.

Marking this as active for two reasons: 1) it should not be marked as a duplicate of a summary issue and 2) it contains good information for fixing this problem, which will not be seen on a normal search if marked as a duplicate.

I have changed Editor CSS то TinyMCE Default in module settings from administration page, and all works fine, no more horizontal scroll bar

Seems like my fix worked for everyone. I'm closing this ticket to get it out of my issues list :-)