Tinymce spills over in IE --- SOLUTION !!!

The grey borders are caused by your them forcing margins.

I think most of the problem is down to your theme, not TinyMCE or the Drupal module.

I've had similar issues with the grey borders, but its down to the CSS you are associating which is nested in the node div.

Does your theme's style.css force any generic tags to 100% or margin: x x x x; ?

If you try to force a

easiest way is to comment out half your stylesheet, then uncomment half of it, and slowly re-introduce chunks of the stylesheet until the problem occurs. That way you should highlight the problem CSS classes.

I've had problems with tinymce expanding too far, also. the white you see is the original width of the text area and the gray 'borders' are from having too many buttons, which are widening the editor. atleast thats what was happening to me :p

Sounds like issues with TinyMCE libraries and not the actual module. Try their support forums: http://sourceforge.net/tracker/?atid=635682&group_id=103281&func=browse

I can confirm that this is a problem with the theme not tinymce. I switched over to the default theme, pushbutton, and it displays perfectly!

I, too, see this problem, when using Andreas_01 theme (see attached screen shot). No doubt it's due to the theme's css and layout.

It seems to be aggravated or triggered when the toolbar is very wide (as in the attached screen shot) - if I minimize or eliminate the width of the toolbar, the problem disappears.

So, even if this is truly due to some themes' css, any help in finding the broken css (or layout code) would be much appreciated!

-Mike

Here's a screenshot with TinyMCE profile configured to use a narrow (default) toolbar set. Note that the editor now fits nicely within the center content column. So, it appears to be triggered by the wide toolbars, and, for some reason, I suspect that it's due to the dropdown list toolbar items not wrapping to the next row of buttons.. but I haven't confirmed this theory.

These were both in FireFox 1.5.x and the Andreas_01 theme, btw.

Thanks for any help...

-Mike

I 'fixed' the problem (well, not really fixed, but verified that the problem is caused by the toolbar being too wide) by removing the nowrap="nowrap" attribute from the toolbar table when it's in the 'top' location in modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/editor_template.js

(the code excerpt below is actually from editor_template_src.js, since the editor_template.js has all whitespace removed).

				if (toolbarLocation == "top") {
					template['html'] += '<tr><td class="mceToolbarTop" align="' + toolbarAlign + '" height="1" nowrap="nowrap">' + toolbarHTML + '</td></tr>';
				}

becomes:

				if (toolbarLocation == "top") {
					template['html'] += '<tr><td class="mceToolbarTop" align="' + toolbarAlign + '" height="1" >' + toolbarHTML + '</td></tr>';
				}

Since the nowrap attribute is specified outside of CSS, I don't know of any way to fix it using CSS only.

I note that the toolbar does not have the nowrap attribute applied when the toolbar is located at the bottom of the editor window, rather than the top.

Does anyone know if there is a way to tweak the # of columns emitted in the tinymce toolbar rows using a javascript callback or other trick? I see that the script allows for a "RowLayout" or "CustomLayout" type (the latter allows a callback to format the editor html).

The css white-space:normal attribute should have been used in the style sheet, rather than hardcoding it into the toolbar HTML markup.

.mceToolbarTop { white-space: normal;}

It appears that the CSS doesn't override an explicit nowrap="nowrap" attribute on an element. More experimentation is in order...

See: http://webdesign.about.com/od/styleproperties/p/blspwhitespace.htm

white-space Special Notes:

• Be careful using nowrap, as you can end up with really long strings of text that can play havoc with your design.

Now then, why should tinyMCE use the nowrap attribute when the toolbar is positioned at the top? (he asked, rhetorically - this is a question for the tinyMCE authors, and should be asked on their forum.)

I neglected to mention in my previous comment that switching the TinyMCE toolbar location from top to bottom will fix the overflow as well, as the script does not emit the nowrap attribute when the toolbar is located below the edit region. Strange...

Ok, I was wrong. A CSS-only fix appears to be available.

Here's what I put in my theme's style.css:

.mceToolbarTop { white-space: normal }

I flushed the browser cache, reloaded the editor and viola! No more overflow. The toolbar wraps, even if it's at the top.

Depending on your theme (I'm using FriendsElectric, which has min-width: 780px;, causing horizontal scrolling in the editor region in FireFox), you may want to tweak this too:

.mceContentBody { min-width: your-minimum-width-in-px;}

(I used 400px as my minimum width to prevent scrolling.)

I solved a similar problem once by adding the following snippet in the theme's template.php
(if you already have a *_tinymce_theme function there, simply add the lines inside it, before the "return $init" part)
You might want to change the value of $max_buttons to something that suits your layout.

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {

  // Split the button bars
  $max_buttons = 16;
  $buttons = array_merge($init['theme_advanced_buttons1'], $init['theme_advanced_buttons2'], $init['theme_advanced_buttons3']);
  $init['theme_advanced_buttons1'] = array_slice($buttons, 0, $max_buttons);
  $init['theme_advanced_buttons2'] = array_slice($buttons, $max_buttons, $max_buttons);
  $init['theme_advanced_buttons3'] = array_slice($buttons, 2*$max_buttons, $max_buttons);

  return $init;
}

About tinymce theme functions, you can see the INSTALL.txt in the module's directory

Outstanding; I hadn't yet had time to look into theme functions, but I'm not surprised there was a way to deal with it using them.

One question: it appears your code example will fail if there are more than 48 buttons (16 buttons times 3 rows) - will tinymce handle more than three rows of buttons? (Yes, I could dig thru the docs or sources, just wondering if you knew offhand.)

I still don't understand why the nowrap attribute is used on the toolbar when it is at the top of the editor, but not the bottom. Puzzling.

Thanks for the tip!

@inactivist : glad I could help
I don't think tinyMCE can deal with more than 3 rows - I haven't checked though.
As I said, the "16" value just fitted my needs for the specific theme I was using on this specific site.

About the nowrap thing and top / bottom toolbar : strange indeed :-)

Marking the support request as fixed

The no-wrap doesn't work for me.
And when I try to override the theme functions I get these errors:

* warning: array_merge() [function.array-merge]: Argument #1 is not an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 101.
* warning: array_merge() [function.array-merge]: Argument #2 is not an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 101.
* warning: array_merge() [function.array-merge]: Argument #3 is not an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 101.
* warning: array_slice() [function.array-slice]: The first argument should be an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 102.
* warning: array_slice() [function.array-slice]: The first argument should be an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 103.
* warning: array_slice() [function.array-slice]: The first argument should be an array in C:\Program Files\xampp\htdocs\roadsoft\themes\voodoo_dolly\template.php on line 104.

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.

For Drupal 6, is there any solution to this problem for tinyMce 6.x?

See this post: http://drupal.org/node/75844#comment-808493

Taking a cue from yched's sample code (#15), here's a beefed-up phptemplate_tinymce_theme function that will intelligently split toolbar items onto multiple rows to get around TinyMCE's poor job of wrapping buttons. The main issue is that TinyMCE's hard-coded HTML and styles prevent toolbar items from wrapping naturally and can force your editor toolbar to be so wide that it breaks your page layout. The culprits are fields like the font drop-downs and the table controls that are wider than standard square buttons. This function lets you identify which fields are extra wide and will handle them specially when distributing buttons onto multiple rows. Just edit the $special_cases array to set tool widths according to your needs (example: 4 stands for "about 4 times the width of a regular button"). Some widths will vary from system to system; for example, if you add a style with a really long description, the style drop-down will become wider and you may need to increase the width equivalent.

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
  // redistribute toolbar buttons to control toolbar width
  $buttons_per_row = 18;
  // treat these tools as multiple button widths
  // each width must be less than buttons_per_row
  $special_cases = array(
    'formatselect' => 4,
    'fontselect' => 6,
    'fontsizeselect' => 4,
    'styleselect' => 7,
    'tablecontrols' => 12,
  );
  // collect full set of active tools
  $buttons = array();
  $max_expected_rows = 5;
  for ($i=1; $i<=$max_expected_rows; $i++) {
    if (array_key_exists('theme_advanced_buttons'.$i, $init)) {
      $buttons = array_merge($buttons, $init['theme_advanced_buttons'.$i]);
      $init['theme_advanced_buttons'.$i] = array();
    }
  }
  // redistribute tools
  $current_row = 1;
  $current_row_buttons = array();
  $current_row_count = 0;
  for ($i=0; $i<count($buttons); $i++) {
    if (array_key_exists($buttons[$i], $special_cases)) {
      // extra-wide special case tool (e.g. font drop-downs)
      if ($current_row_count + $special_cases[$buttons[$i]] <= $buttons_per_row) {
        $current_row_buttons[] = $buttons[$i];
        $current_row_count += $special_cases[$buttons[$i]];
      } else {
        // close out this row
        $init['theme_advanced_buttons'.$current_row] = $current_row_buttons;
        // start a new row
        $current_row++;
        $current_row_buttons = array($buttons[$i]);
        $current_row_count = $special_cases[$buttons[$i]];
      }
    } else {
      // normal sized button
      if ($current_row_count+1 <= $buttons_per_row) {
        $current_row_buttons[] = $buttons[$i];
        $current_row_count++;
      } else {
        // close out this row
        $init['theme_advanced_buttons'.$current_row] = $current_row_buttons;
        // start a new row
        $current_row++;
        $current_row_buttons = array($buttons[$i]);
        $current_row_count = 1;
      }
    }
  }
  if (count($current_row_buttons)) {
    // close out last row
    $init['theme_advanced_buttons'.$current_row] = $current_row_buttons;
  }

  return $init;
}

For the record, I am using this with Drupal 5.7 with TinyMCE module 5.x-1.9 and TinyMCE version 2.1.3.

All problems with resizing are caused by using TABLES in the toolbar.

Let me explain: there is 10 icons in the toolbar, code looks like this: <td>icon 1</td><td>icon 2</td>...

As many people I did think too it will be an easy CSS fix, so I tried:
TD{display:inline;float:left;} etc...

Worked in Opera, Firefox, but IE 6 freezed, and 7+ didn't work.

I decided to change this to tableless design (the only solution) and...

...and after 6 hours I got it working!!! plus when you resize the window the textarea automatically resizes too (if size set to 100%) without the need of buggy "auto_size" parameter on!!! the toolbar icons just flow at it works like a charm.

THE SOLUTION

(works in IE6+, Firefox, Opera, other browsers [homemade ones] used by <1% of population not tested)

_____________ FILE: [ui.css] _____________

FIND & DELETE:
----------------------------

.defaultSkin .mceToolbar {height:26px}
.defaultSkin td.mceToolbar {padding-top:1px; vertical-align:top;}
.defaultSkin table.mceToolbar {margin-left:3px;}
.defaultSkin .mceSeparator {display:block; background:url(../../img/icons.gif) -180px 0; width:2px; height:20px; margin:2px 2px 0 4px}


APPEND AT THE END:
----------------------------
.defaultSkin .customToolRow{}
.defaultSkin .customToolCol{display:block;float:left;height:26px;}
.defaultSkin .customToolSep{display:block; background:url(../../img/icons.gif) -180px 0; width:2px; height:24px; margin:2px 2px 0 4px;}
.defaultSkin .customToolCol A SPAN.mceIcon{}
.defaultSkin .customToolCol TABLE.mceListBox{}

_____________ FILE: [tiny_mce.js] _____________

FIND:
/* file:jscripts/tiny_mce/classes/ui/Toolbar.js */


AND
REPLACE:

/* file:jscripts/tiny_mce/classes/ui/Toolbar.js */

tinymce.create('tinymce.ui.Toolbar:tinymce.ui.Container', {
	renderHTML : function() {
		var t = this, h = '', c, co, dom = tinymce.DOM, s = t.settings, i, pr, nx, cl;
		
		
		h='<div class="customToolRow">';
		
		cl = t.controls;
		for (i=0; i<cl.length; i++) {
			// Get current control, prev control, next control and if the control is a list box or not
			co = cl[i];
			pr = cl[i - 1];
			nx = cl[i + 1];
			
			// FIX:
			h += '<div class="customToolCol'+(co.classPrefix == 'mceSeparator' ? ' customToolSep' : '')+'">'+ co.renderHTML() + '</div>';
		}
		
		h+='</div>';
		
		return dom.createHTML('div', {id : t.id, 'class' : 'mceToolbar' + (s['class'] ? ' ' + s['class'] : ''), align : t.settings.align || ''}, h);
	}

	});

2mzvarik: for what version of TinyMCE is this patch ? I'm using last one and I do not see /* file:jscripts/tiny_mce/classes/ui/Toolbar.js */
in tiny_mce.js.
Thanks.

Hi, I tested it on version 3.2.1

The new one: 3.2.2 doesn't solve this and search for this line (tiny_mce.js):

tinymce.create('tinymce.ui.Toolbar:tinymce.ui.Container', {