Editor always at least 300px wide on Webkit

[Mikko Kinnunen]

Webkit-based browsers refuse to create editors less than 300 pixels wide. Following code creates 300px wide editor, even though 150 is specified for all width options. Testcode was made against 2nd example in /_samples/replacebycode.html

CKEDITOR.config.toolbar_Mini = [ ['Bold','Italic','RemoveFormat'] ];
CKEDITOR.replace( 'editor2', { width: 150, resize_maxWidth: 150,  resize_minWidth: 150, skin: 'v2', toolbar: 'Mini' } );

Happens on Safari 4.0.3 (Windows) / Chrome 4.1.249.1036 (Windows)

[Mikko Kinnunen]

Problem still present in CKE 3.3 & Chrome 5

[Mikko Kinnunen]

Someone came up with a workaround in the forums:

​http://cksource.com/forums/viewtopic.php?p=48574#p48574

Worked for me, would be nice to have it included in core.

[Mikko Kinnunen]

Just adding a note that this bug reappears after setData(..)

1. Setup 'instanceReady' fix described in the forum post
2. Create editor normally with CKEDITOR.replace(...)
3. Fix works and you get an editor the size you requested
4. Change text in editor with editor_instance.setData('<p>Hello</p>');
5. Editor changes text and grows to be 300px wide

[Jakub Ś]

Reproducible in Webkit from CKEditor 3.0.

---

Workaround based on original forum post, extended to handle also setData problem:

CKEDITOR.config.toolbar_Mini = [ ['Bold','Italic','RemoveFormat'] ];
CKEDITOR.replace( 'editor2', { width: 150, resize_maxWidth: 150,  resize_minWidth: 150, skin: 'kama', toolbar: 'Mini' } );
								
CKEDITOR.on('instanceReady', function (evt) {
	//editor
	var editor = evt.editor;
	resizeEditorWebkit( editor );		
								
	editor.on('afterSetData', function(event){
		resizeEditorWebkit( event.editor ); 								
	});

	editor.on('mode', function( event ){
		if ( event.editor.mode === 'source' ){			
			var txtar = document.getElementById('cke_' + event.editor.name).getElementsByTagName('table')[0].getElementsByTagName('textarea')[0];
			txtar.style.display = 'block';
			txtar.style.height = 'inherit';				
		}else{
			resizeEditorWebkit( event.editor );
		}		
	});
});
							
function resizeEditorWebkit( editor ) {
	//webkit not redraw iframe correctly when editor's width is < 310px (300px iframe + 10px paddings)
	if (CKEDITOR.env.webkit && parseInt(editor.config.width) < 310) {									
		var iframe = document.getElementById('cke_contents_' + editor.name).firstChild;
		iframe.style.display = 'none';
		iframe.style.display = 'block';
	}
}

All you have to do is insert this code in E.g. replacebycode sample (second editor).
Can be tested by adding button:

<input type="button" value="click" onclick="CKEDITOR.instances['editor2'].insertHtml('<p>myTest</p>');" />

Update:
Nick Kurucz has pointed out that this workaround does not work when switching to source mode. I have added something extra - still not perfect as you can see editor resized for a second.

[webhelio]

This workaround works well for us, even though you can see resized for a second it works and in the end that's what we need. Thanks!

[Piotrek Koszuliński]

Expired. Now everything works correctly.